Infinimesh recursive object transformation for vuetify tree

index.html

<div id="app">
  <v-app id="inspire">
    <v-treeview :items="items"></v-treeview>
  </v-app>
</div>

infinimesh-recursive-object-transformation-for-vuetify-tree.markdown

Infinimesh recursive object transformation for vuetify tree

A Pen by Johannes Brüderl on CodePen.

License.

script.babel

function transformObject(input) {
  var res = {};
  res.id = input.uid;
  res.name = input.name;
  res.children = [];
  if (input.devices) {

    for (var device of input.devices) {
      res.children.push(transformObject(device));
    }
  }

  if (input.objects) {

    for (var object of input.objects) {
      res.children.push(transformObject(object));
    }
  }

  return res;
}


function transform(input) {
  var res = [];

  for (var value of input.objects) {
    var el = transformObject(value);
    res.push(el)
  }



  for (var value of input.devices) {
    var el = transformObject(value);
    res.push(el)
  }

  return res;
}

 var data = {
    "objects": [{
        "uid": "0x1119d",
        "name": "Johannes' Home",
        "objects": [{
            "uid": "0x1119e",
            "name": "First Floor",
            "objects": [{
              "uid": "0x1119f",
              "name": "Living Room",
              "devices": [{
                "uid": "0x111a0",
                "name": "PC"
              }]
            }]
          },
          {
            "uid": "0x111a3",
            "name": "Second Floor"
          }
        ],
        "devices": [{
          "uid": "0x111a4",
          "name": "le lamp"
        }]
      },
      {
        "uid": "0x111a5",
        "name": "Enclosing Room",
        "devices": [{
          "uid": "0x111a6",
          "name": "Enclosing-room-device"
        }]
      }
    ],
    "devices": [{
      "uid": "0x111a2",
      "name": "some device"
    }]
  };


new Vue({
  el: '#app',
  data: () => ({
    items: transform(data)
  })
})

scripts

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.1/dist/vuetify.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.4.1/dist/vuetify.min.css" rel="stylesheet" />

vuetify-example-pen.markdown

Vuetify Example Pen

A Pen by Johannes Brüderl on CodePen.

License.