Find JSON index based on child key value using Javascript

Question

I have the below JSON which controls the flow of the pages in my application. To navigate between screens manually I use the index of a page. If I were to link to Page 1 I would use the index '0'. I would like to be able to navigate using the id instead. So I could use S010_010 to navigate. Unfortunately the navigation function of the app is used by multiple elements and cannot be changed completely so I am looking for a method that can take the id and return the index from 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: ""
    },
  ]
};

This is an example of how I currently retrieve the id using the index:

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

Answer 1

There is no specific method, but you can create your own inverted index

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

You can use for-in to iterate and return the index if id matches with that of method's. It is also recommended to use for-of but you end up descructing something like this for(const [index, value] of flows.default.entries()) to fetch index hence used for-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

We use for in cycle to iterate through our array of objects and return the index if id was found.

ES5 solution

 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 solution

We use Array.find function to iterate through our array, save the index if id was found and than return it. In the case if it is not found it returns -1. But unfortunatelly this solution isn't shorter than my ES5 solution.

 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