使用Javascript根據子鍵值查找JSON索引

Question

我有下面的JSON，它控制應用程序中頁面的流動。 要手動在屏幕之間導航，我使用頁面的索引。 如果要鏈接到Page 1，我將使用索引“ 0”。 我希望能夠使用id進行導航。 因此我可以使用S010_010進行導航。 不幸的是，該應用程序的導航功能被多個元素使用，並且無法完全更改，因此我正在尋找一種可以獲取id並從flows返回索引的方法。

var flows = {
  "default": [{
      theme: "theme1",
      events: "touchstart",
      easingSlideIn: "transition.fadeIn",
      easingSlideOut: "transition.fadeOut",
      easingRef: "transition.perspectiveRightIn",
      easingPop: "transition.flipYIn"
    },
    {
      id: "S010_010", //0
      description: "",
      chapter: "01",
      ref: ""
    },
    {
      id: "S020_010", //1
      description: "",
      chapter: "01",
      ref: ""
    },
    {
      id: "S030_010", //2
      description: "",
      chapter: "01",
      ref: ""
    },
  ]
};

這是當前如何使用索引檢索id的示例：

this.options.flow[screen +1].id

Answer 1

沒有特定的方法，但是您可以創建自己的倒排索引

var invertedIndex = {};
flows.default.forEach((elem, index) => {
   if(elem.id != null) {
      invertedIndex[elem.id] = index - 1;
   }
})
//then you can use the id for the lookup as
invertedIndex['S030_010'] 

Answer 2

如果id與方法的匹配，則可以使用for-in進行迭代並返回索引。 還建議使用for-of但是最終會用類似for(const [index, value] of flows.default.entries())來獲取要用於in-in的索引

 let flows = { "default": [{ theme: "theme1", events: "touchstart", easingSlideIn: "transition.fadeIn", easingSlideOut: "transition.fadeOut", easingRef: "transition.perspectiveRightIn", easingPop: "transition.flipYIn" }, { id: "S010_010", //0 description: "", chapter: "01", ref: "" }, { id: "S020_010", //1 description: "", chapter: "01", ref: "" }, { id: "S030_010", //2 description: "", chapter: "01", ref: "" }, ] }; let getFlowByID = (id) => { for(let eachFlowIndex in flows.default){ if(flows.default[eachFlowIndex].id == id){ return eachFlowIndex; } } } console.log(getFlowByID("S030_010")); // gets S030_010 index 

Answer 3

我們使用for in循環遍歷對象數組，如果找到id，則返回索引。

ES5解決方案

 var flows = { "default": [ { theme: "theme1", events: "touchstart", easingSlideIn: "transition.fadeIn", easingSlideOut: "transition.fadeOut", easingRef: "transition.perspectiveRightIn", easingPop: "transition.flipYIn" }, { id: "S010_010", //0 description: "", chapter: "01", ref: "" }, { id: "S020_010", //1 description: "", chapter: "01", ref: "" }, { id: "S030_010", //2 description: "", chapter: "01", ref: "" } ] }; function getIndex(id) { var i = 0, objs = flows.default; for (i in objs) if (objs[i].id == id) return +i - 1 } console.log(getIndex('S010_010')); //0 

ES6解決方案

我們使用Array.find函數來遍歷數組，如果找到id則保存索引，然后返回它。 如果找不到，它將返回-1。 但是不幸的是，該解決方案並不比我的ES5解決方案短。

 var flows = { "default": [ { theme: "theme1", events: "touchstart", easingSlideIn: "transition.fadeIn", easingSlideOut: "transition.fadeOut", easingRef: "transition.perspectiveRightIn", easingPop: "transition.flipYIn" }, { id: "S010_010", //0 description: "", chapter: "01", ref: "" }, { id: "S020_010", //1 description: "", chapter: "01", ref: "" }, { id: "S030_010", //2 description: "", chapter: "01", ref: "" } ] }; let getIndex = (id) => { let ret = -1; flows.default.find((elem, index) => { if(elem.id == id) ret = index - 1 }); return ret }; console.log(getIndex('S010_010')); //0