title: How to traverse nested data
body: <p>I have to traverse a large data set to collect the final child element of the nodes in javascript.</p>
  
  <p>I need to end up with an array of the Branch Codes found in the child Details.
  Here is the output I'm attempting to get:</p>
  
  <p>[1000, 1201, 1202, 2101, 3101, 3201]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "TITLE": {
      "FirstLevel": {
        "Details": {
          "Code": "01",
        },
        "SecondLevel": [
          {
            "Details": {             
              "Description": "{desc}",          
            },
            "ThirdLevel": {
              "Details": {
                "Code": "01",
              },
              "FourthLevel": [
                {
                  "Details": {
                    "Code": "11",
                  },
                  "Branch": {
                    "Details": {
                      "Code": "1000",
                    }
                  }
                },
                {
                  "Details": {
                    "Code": "12",
                  },
                  "Branch": [
                    {
                      "Details": {
                        "Code": "1201",
                      }
                    },
                    {
                      "Details": {
                        "Code": "1202",
                      }
                    }
                  ]
                }
              ]
            }
          },
          {
            "Details": {
              "Code": "100",
            },
            "ThirdLevel": [
              {
                "Details": {
                  "Code": "02",
                },
                "FourthLevel": {
                  "Details": {
                    "Code": "21"
                  },
                  "Branch": {
                    "Details": {
                      "Code": "2101",
                    }
                  }
                }
              },
              {
                "Details": {
                  "Code": "03",
                },
                "FourthLevel": [
                  {
                    "Details": {
                      "Code": "31",
                    },
                    "Branch": {
                      "Details": {
                        "Code": "3101",
                      }
                    }
                  },
                  {
                    "Details": {
                      "Code": "32",
                    },
                    "Branch": {
                      "Details": {
                        "Code": "3201",
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've looked at answers on more basic questions and tried to adapt the solution. </p>
  
  <p>One such solution takes in an id passed, and will update the name based on the id. I thought I could use the similar map implementation here. There is an issue because the array doesn't just have 'children' to represent where there will be child nodes. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function update(object, passedId) {
  
      object.children.map((element, index) =&gt; {
          if (element.id === passedId) {
              console.log(index)
              object.children[index].name = "New Name"
          }
          if (element.children != null) { // condition for checking Nesting
              update(element, passedId)
          }
      })
  
      console.log(object.children)
  }
  
  update(obj, "Branch");</code></pre>
  </div>
  </div>
  </p>
  
  <p>Next I tried a more simple approach </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getSubItem(obj) {
    for (item in obj) {
      for (subItem in obj[item]) {
        for (subsubItem in obj[subItem]){
        console.log(obj[item][subItem][subsubItem]);
        }
      }
    }
  }
  getSubItem(obj)</code></pre>
  </div>
  </div>
  </p>
  
  <p>and so on, adding sub after sub after sub item, but that kind of nested for looping seems incredibly unstable, and since branches can be nested in different areas it doesn't seem reliable either. Am I missing an easy solution here? </p>