Search code examples
javascriptjsonrecursiontreeviewbootstrap-treeview

Making json conform to Bootstrap Treeview format


I'm trying to figure out the best way to transform some JSON data into the format requested for bootstrap-treeview. My initial thought was to create some sort of recursive function to go through and modify everything, but i'm having some real difficulty in achieving this. Any advice would be much appreciated!

Here a console log of the data returned by my service:

Object
  England: Object
    London: Object
      Bayerische Staatsbibliothek: Object
        Cod. arab. 1251: Array[1]
          0: Object
            key1: "adflkjadf",
            key2: "adflkjadfk",
            key3: "adlkfjadf",
            __proto__: Object
            length: 1
          text: "Cod. arab. 1251"
          __proto__: Array[0]
        Cod. arab. 1252: Array[1]
        Cod. arab. 1253: Array[1]
        Cod. arab. 1254: Array[1]
        Cod. arab. 1255: Array[1]
        Cod. arab. 1256: Array[1]
        Cod. arab. 1257: Array[1]
        Cod. arab. 1258: Array[1]
        Cod. arab. 1259: Array[1]
        Cod. arab. 1260: Array[1]
  Germany: Object
    Munich: Object
      Bayerische Staatsbibliothek: Object
        Cod. arab. 1251: Array[1]
          0: Object
            key1: "adflkjadf",
            key2: "adflkjadfk",
            key3: "adlkfjadf",
            __proto__: Object
            length: 1
          text: "Cod. arab. 1251"
          __proto__: Array[0]
        Cod. arab. 1252: Array[1]
        Cod. arab. 1253: Array[1]
        Cod. arab. 1254: Array[1]
        Cod. arab. 1255: Array[1]
        Cod. arab. 1256: Array[1]
        Cod. arab. 1257: Array[1]
        Cod. arab. 1258: Array[1]
        Cod. arab. 1259: Array[1]
        Cod. arab. 1260: Array[1]

Here's the format the the boostrap-treeview needs:

var tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];

Here's my attempt at a recursive function to accomplish this:

function format_for_treeview(node) {
  for (var key in node) {
    // skip loop if the property is from prototype
    if (!node.hasOwnProperty(key)) continue;

    if (typeof node === 'object') {
      format_for_treeview(node[key]);
      if (Array.isArray(node)) {
        node[key]['text'] = node[key]['bibliography_text'];
      } else {
        node[key]['text'] = key;
      }
    }
  }  
}

Solution

  • With help from the following link I discovered d3's nest() function does almost exactly what i needed. However, i did have to fork the d3.js file and rename the 'key' and 'values' key names in the nest()->entries() map function.

    Additionally, I modified the service to return an array of objects instead of trying to do grouping inside the service.

      var withText = jsondata.map(function(i) {
        i['text'] = i['bibliography_text'];
        return i;
      });
    
      var nestedData = d3.nest()
        .key(function(d) { return d.country; })
        .key(function(d) { return d.city; })
        .entries(withText);
    

    The resulting output gives me an array exactly like the var tree = [...] listed above.