title: JSON to Parent/child object in Javascript
body: <p>I'm currently trying to display Json data into a <a href="https://material.angular.io/components/tree/overview" rel="nofollow noreferrer">Material Tree</a> , the problem is that the material tree won't directly take a Json dataSource and i need to convert mine to something like this : </p>
  
  <pre><code>[
    {
      name: 'Fruit',
      children: [
        {name: 'Apple'},
        {name: 'Banana'},
        {name: 'Fruit loops'},
      ]
    }, {
      name: 'Vegetables',
      children: [
        {
          name: 'Green',
          children: [
            {name: 'Broccoli'},
            {name: 'Brussel sprouts'},
          ]
        }
      ]
    },
  ];
  </code></pre>
  
  <p>The json data look like this : </p>
  
  <pre><code>{
      "processTimer": {
          "Environment": {
              "Environment": {
                  "initiator": {
                      "commonName": "anonymous"
                  },
                  "locale": "fr_FR",
                  "counter": "9004",
                  "last-fault": {
                      "type": "FaultException",
                      "message": "java.lang.NullPointerException",
  
                  }
              }
          }
      {"oui" : {
         "_uri": "",
         "__text" : ""
        }
     }
      }
  }
  </code></pre>
  
  <p>After weeks of search i understood that i would need a recursive function that take incoming json and traverse it throught to rebuild the new object. But i don't really get how do i get all the keys and transform them into values. I tried a lot of different StackOverflow code but i couldn't find one that does what i need. </p>
  
  <p>I reseigned on using <a href="https://www.npmjs.com/package/ngx-json-viewer" rel="nofollow noreferrer">ngx-json-viewer</a> for now even tho it's not the sexiest it takes directly json format in, i still wonder why most of the javascript Tree libraries don't. </p>
  
  <p>If someone found something or want to give me a hand it would be greatly appreciated.</p>
  
  <p>Thanks in advance ! :)</p>
  
  <p>Edit: i Found this method on <a href="https://stackoverflow.com/a/722676/12148878">this thread</a> that help me to navigate the object :</p>
  
  <pre><code>traverse(jsonObj) {
  
      if (jsonObj !== null &amp;&amp; typeof jsonObj == "object") {
  
        Object.entries(jsonObj).forEach(([key, value]) =&gt; {
  
          // If value is an object (This means that the value is a child) and is the same as a variable 
          //(because the first key is always the processName)
          if (typeof value == "object" &amp;&amp; key == this.processName) {
            this.treeObject.push({ name: key, children: [] })
            this.traverse(value)
  
            //If value is an object (This means that the value is a child)
          } else if (typeof value == "object") {
            this.treeObject[0].children.push({ name: key, children: [] })
            this.traverse(value)
  
            // If value is a real value
          } else if (typeof value != "object") {
            this.treeObject[0].children.push({ name: key, value: value })
          }
        });
      }
    }
  </code></pre>
  
  <p>The problem is that i don't know how to go deeper into the TreeObject at the same time as i'm going deeper in the JsonObj, how to keep track of the level, because right now it obviously push each item in the first array after the processName like this : </p>
  
  <pre><code>[{…}]
  0: name: "ProcessTimer"
  children: Array(25)
  0: {name: "Environment", children: Array(0)}
  1: {name: "_uri", children: Array(1)}
  2: {name: "Environment", children: Array(0)}
  ...
  ...
  23: {name: "_uri", children: Array(1)}
  24: {name: "__text", children: Array(1)}
  </code></pre>
  
  <p>Thanks for any help !</p>