Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript Nested JSON get parent results from child

I have a nested JSON and I’m getting the "variants" results from API. And I’m trying to get this variants parent names.

Here is the json:

{
 "active": true,
 "main": [{
      "name": "groupOne",
      "heights": [{
                "name": "sm",
                "active": true,
                "addSelectedProduct": false,
                "colors": [{
                          "name": "gold",
                          "triggers": {
                               "offerIds": ["11111"], "variants": ["11112"]
                          }
                     },
                     {
                          "name": "blue",
                          "triggers": {
                               "offerIds": ["11113"], "variants": ["11114"]
                          }
                     },
                     {
                          "name": "white",
                          "triggers": {
                               "offerIds": ["11115"], "variants": ["11116"]
                          }
                     },
                     {
                          "name": "black",
                          "triggers": {
                               "offerIds": ["11117"], "variants": ["11118"]
                          }
                     }
                ]
                     
           },
           {
                "name": "md",
                "active": true,
                "addSelectedProduct": false,
                "colors": [{
                          "name": "gold",
                          "triggers": {
                               "offerIds": ["11119"], "variants": ["11121"]
                          }
                     },
                     {
                          "name": "blue",
                          "triggers": {
                               "offerIds": ["11122"], "variants": ["11123"]
                          }
                     },
                     {
                          "name": "white",
                          "triggers": {
                               "offerIds": ["11124"], "variants": ["11125"]
                          }
                     },
                     {
                          "name": "black",
                          "triggers": {
                               "offerIds": ["11126"], "variants": ["11127"]
                          }
                     }
                ]
           },
           {
                "name": "lg",
                "active": true,
                "addSelectedProduct": false,
                "colors": [{
                          "name": "gold",
                          "triggers": {
                               "offerIds": ["11128"], "variants": ["11129"]
                          }
                     },
                     {
                          "name": "blue",
                          "triggers": {
                               "offerIds": ["11131"], "variants": ["11132"]
                          }
                     },
                     {
                          "name": "white",
                          "triggers": {
                               "offerIds": ["11133"], "variants": ["11134"]
                          }
                     },
                     {
                          "name": "black",
                          "triggers": {
                               "offerIds": ["11135"], "variants": ["11136"]
                          }
                     }
                ]
           }]

      },
      {
      "name": "groupTwo",
      "heights": [{
           "name": "sm",
           "active": true,
           "addSelectedProduct": false,
           "colors": [{
                     "name": "gold",
                     "triggers": {
                          "offerIds": ["11137"], "variants": ["11138"]
                     }
                },
                {
                     "name": "blue",
                     "triggers": {
                          "offerIds": ["11139"], "variants": ["11141"]
                     }
                },
                {
                     "name": "white",
                     "triggers": {
                          "offerIds": ["11142"], "variants": ["11143"]
                     }
                },
                {
                     "name": "black",
                     "triggers": {
                          "offerIds": ["11144"], "variants": ["11145"]
                     }
                }
           ]
      },
      {
           "name": "md",
           "active": true,
           "addSelectedProduct": false,
           "colors": [{
                     "name": "gold",
                     "triggers": {
                          "offerIds": ["11146"], "variants": ["11147"]
                     }
                },
                {
                     "name": "blue",
                     "triggers": {
                          "offerIds": ["11148"], "variants": ["11149"]
                     }
                },
                {
                     "name": "white",
                     "triggers": {
                          "offerIds": ["11151"], "variants": ["11152"]
                     }
                },
                {
                     "name": "black",
                     "triggers": {
                          "offerIds": ["11153"], "variants": ["11154"]
                     }
                }
           ]
           
      },
      {
           "name": "lg",
           "active": true,
           "addSelectedProduct": false,
           "colors": [{
                "name": "gold",
                "triggers": {
                     "offerIds": ["11155"], "variants": ["11156"]
                }
           },
           {
                "name": "blue",
                "triggers": {
                     "offerIds": ["11157"], "variants": ["11158"]
                }
           },
           {
                "name": "white",
                "triggers": {
                     "offerIds": ["11159"], "variants": ["11159"]
                }
           },
           {
                "name": "black",
                "triggers": {
                     "offerIds": ["11161"], "variants": ["11162"]
                }
           }
      ]
      }]


  }]

}

I tried a lot of ways like filter, indexOf but no luck. I can reach the final step with nested foreach functions like that:

          var elMain, elHeights, elColor, elOffer;
      function findProduct(item){
           app.main.forEach(function(el){
                el.heights.forEach(function(itemHeights){
                     itemHeights.colors.forEach(function(itemColor){
                          if(itemColor.triggers.variants.indexOf(item.toString())){
                               elOffer = itemColor.triggers.offerIds
                               elColor = itemColor;
                               elHeights = itemHeights;
                               elMain = el;
                          } else{
                          }
                     })
                })
           })
      }

      findProduct(11123)

      console.log(elMain);
      console.log(elHeights);
      console.log(elColor);
      console.log(elOffer);

But I can’t get the correct result. I need to get selected variant’s parent names directly. Is there a method for that? Any help would be awesome.

Tags:

2

Answers


  1. 0

    You shouldn’t use forEach because it doesn’t let you break easily from it when you have found your match. Better use a for (key in obj).

    With forEach

    var app={active:!0,main:[{name:"groupOne",heights:[{name:"sm",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11111"],variants:["11112"]}},{name:"blue",triggers:{offerIds:["11113"],variants:["11114"]}},{name:"white",triggers:{offerIds:["11115"],variants:["11116"]}},{name:"black",triggers:{offerIds:["11117"],variants:["11118"]}}]},{name:"md",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11119"],variants:["11121"]}},{name:"blue",triggers:{offerIds:["11122"],variants:["11123"]}},{name:"white",triggers:{offerIds:["11124"],variants:["11125"]}},{name:"black",triggers:{offerIds:["11126"],variants:["11127"]}}]},{name:"lg",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11128"],variants:["11129"]}},{name:"blue",triggers:{offerIds:["11131"],variants:["11132"]}},{name:"white",triggers:{offerIds:["11133"],variants:["11134"]}},{name:"black",triggers:{offerIds:["11135"],variants:["11136"]}}]}]},{name:"groupTwo",heights:[{name:"sm",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11137"],variants:["11138"]}},{name:"blue",triggers:{offerIds:["11139"],variants:["11141"]}},{name:"white",triggers:{offerIds:["11142"],variants:["11143"]}},{name:"black",triggers:{offerIds:["11144"],variants:["11145"]}}]},{name:"md",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11146"],variants:["11147"]}},{name:"blue",triggers:{offerIds:["11148"],variants:["11149"]}},{name:"white",triggers:{offerIds:["11151"],variants:["11152"]}},{name:"black",triggers:{offerIds:["11153"],variants:["11154"]}}]},{name:"lg",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11155"],variants:["11156"]}},{name:"blue",triggers:{offerIds:["11157"],variants:["11158"]}},{name:"white",triggers:{offerIds:["11159"],variants:["11159"]}},{name:"black",triggers:{offerIds:["11161"],variants:["11162"]}}]}]}]};


var elMain, elHeights, elColor, elOffer;

function findProduct(item) {
  found = false
  app.main.forEach(function(el) {
    if (found) return;
    elMain = el.name
    el.heights.forEach(function(itemHeights) {
      if (found) return;
      elHeights = itemHeights.name
      itemHeights.colors.forEach(function(itemColor) {
        if (found) return;
        elColor = itemColor.name
        if (itemColor.triggers.variants.indexOf("" + item) >= 0) {
          elOffer = itemColor.triggers.offerIds
          found = true
        }
      })
    })
  })
}

findProduct(11123)

console.log(elMain);
console.log(elHeights);
console.log(elColor);
console.log(elOffer);
    .as-console-wrapper {
  min-height: 100%;
}

    With for in

    var app={active:!0,main:[{name:"groupOne",heights:[{name:"sm",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11111"],variants:["11112"]}},{name:"blue",triggers:{offerIds:["11113"],variants:["11114"]}},{name:"white",triggers:{offerIds:["11115"],variants:["11116"]}},{name:"black",triggers:{offerIds:["11117"],variants:["11118"]}}]},{name:"md",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11119"],variants:["11121"]}},{name:"blue",triggers:{offerIds:["11122"],variants:["11123"]}},{name:"white",triggers:{offerIds:["11124"],variants:["11125"]}},{name:"black",triggers:{offerIds:["11126"],variants:["11127"]}}]},{name:"lg",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11128"],variants:["11129"]}},{name:"blue",triggers:{offerIds:["11131"],variants:["11132"]}},{name:"white",triggers:{offerIds:["11133"],variants:["11134"]}},{name:"black",triggers:{offerIds:["11135"],variants:["11136"]}}]}]},{name:"groupTwo",heights:[{name:"sm",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11137"],variants:["11138"]}},{name:"blue",triggers:{offerIds:["11139"],variants:["11141"]}},{name:"white",triggers:{offerIds:["11142"],variants:["11143"]}},{name:"black",triggers:{offerIds:["11144"],variants:["11145"]}}]},{name:"md",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11146"],variants:["11147"]}},{name:"blue",triggers:{offerIds:["11148"],variants:["11149"]}},{name:"white",triggers:{offerIds:["11151"],variants:["11152"]}},{name:"black",triggers:{offerIds:["11153"],variants:["11154"]}}]},{name:"lg",active:!0,addSelectedProduct:!1,colors:[{name:"gold",triggers:{offerIds:["11155"],variants:["11156"]}},{name:"blue",triggers:{offerIds:["11157"],variants:["11158"]}},{name:"white",triggers:{offerIds:["11159"],variants:["11159"]}},{name:"black",triggers:{offerIds:["11161"],variants:["11162"]}}]}]}]};

var elMain, elHeights, elColor, elOffer;

function findProduct(item) {
  found = false
  for (var i in app.main) {
    el = app.main[i]
    elMain = el.name
    for (var j in el.heights) {
      itemHeights = el.heights[j]
      elHeights = itemHeights.name
      for (var k in itemHeights.colors) {
        itemColor = itemHeights.colors[k]
        elColor = itemColor.name
        if (itemColor.triggers.variants.indexOf("" + item) >= 0) {
          elOffer = itemColor.triggers.offerIds
          return
        }
      }
    }
  }
}

findProduct(11123)

console.log(elMain);
console.log(elHeights);
console.log(elColor);
console.log(elOffer);
    .as-console-wrapper {
  min-height: 100%;
}
    Login or Signup to reply.
  2. 0

    You don’t have to do all that. You can just do

    const products = functionThatGetsDataFromAPI();
const key = "11123";
const groups = products.main;
var variant = null;

groups.every((group) => {
    return group.heights.every((height) => {
        return height.colors.every((color)=>{
            if (color.triggers.variants.includes(key)) {
                variant=height.name;
            }
            return !variant; // Exit the loop if the variant is found
        });
    });
});
console.log(variant)

    This will exit early if found instead of having to loop through every object every time like the forEach does

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search