title: Material UI - TreeView datastructure
body: <p>I want to structure the data that I get from a server, so I can use the <code>TreeView</code> component from <code>Material UI</code>: <a href="https://material-ui.com/api/tree-view/" rel="nofollow noreferrer">https://material-ui.com/api/tree-view/</a></p>
  
  <p>I'm fetching large amounts of data so I want to fetch child nodes from the server when the user clicks on the expand button. So
  when the first node is expanded a HTTP request is sent to a server which returns all of the children of that node. When another node is expanded the children of that node is fetched etc.</p>
  
  <p>On startup of the page I want to fetch the root node and its children. The JSON returned will look something like this:</p>
  
  <pre><code>{
   "division": {
   "id": "1234",
   "name": "Teest",
   "address": "Oslo"
   },
   "children": [
     {
      "id": "3321",
      "parentId": "1234",
      "name": "Marketing",
      "address": "homestreet"
     },
     {
      "id": "3323",
      "parentId": "1234",
      "name": "Development",
      "address": "homestreet"
     }
   ]
  }
  </code></pre>
  
  <p>When expanding the <code>Marketing</code> node I want to make a HTTP call to fetch the children of this node. So I would get JSON like this:</p>
  
  <pre><code>{
    "children": [
      {
        "id": "2212",
        "parentId": "3321",
        "name": "R&amp;D",
        "address": "homestreet"
      },
      {
        "id": "4212",
        "parentId": "3321",
        "name": "Testing",
        "address": "homestreet"
      }
    ]
  }
  </code></pre>
  
  <p>But I am confused on how to create such a data structure which can later be used my the <code>TreeView</code> component. How can I create such a structure?</p>