CODEWITHSUNDEEP
javascriptd3.js
John
John

Reputation: 181

Convert table data to tree data JSON format (parent, child) d3.js dynamically?

I want to visualize table data as tree data in d3.js

My input table data is

enter image description here

But i want tree data as:

[{"name":"SU1", "children":[{ "name":"DU1", "children":[{"name":"ST1"},{"name":"ST2"}]}, {"name":"DU2", "children":[]}]}, {"name":"SU2","children":[{ "name":"DU3", "children":[{"name":"ST3"}]}, {"name":"SU3","children":[]}]}]

Here my logic is if data value is null there shouldn't be any children for that node.

I have a code here in stack overflow it self but not working for my logic where do I change the logic such that i wont get the children for null values.

Below is the link for the code what I have tried...

How to convert Data table to tree json format dynamically?

Thanks in advance...

Upvotes: 0

Views: 911

Answers (3)

John
John

Reputation: 181


    var test = new function() {

        var table =  [
          ['SU1', 'DU1', 'ST1'],
          ['SU1', 'DU1', 'ST2'],
          ['SU1', 'DU2', null],
          ['SU2', 'DU3', 'ST3'],
          ['SU3', null, null]
        ] ;
           var res = [];

        this.init = function() {
          for (var i = 0; i < table.length; i++) {
            var curRow = table[i];
            test.myAddFun(res, curRow, 0);
          }
         console.log(JSON.stringify(res));
          return res;
        };

        this.myAddFun = function(_res, arr, startIndex) {
          var addedToJSON = false;
          for (var i = 0; i < _res.length; i++) {
            var curJSON = _res[i];
           console.log(arr[startIndex])
            if ( curJSON['name'] == arr[startIndex]) {
              if (startIndex < arr.length - 1) {
                if(arr[startIndex+1]!=null)
                test.myAddFun(curJSON['children'], arr, startIndex + 1);
              }
              addedToJSON = true;
              break;
            }
          }
          if (addedToJSON) {
            return;
          }
          var curJSON:any = {};
          if(arr[startIndex]!=null)
          curJSON['name'] = arr[startIndex];

          if (startIndex < arr.length - 1) {
            curJSON['children'] = [];
            if(arr[startIndex+1]!=null)
            test.myAddFun(curJSON['children'], arr, startIndex + 1);

        }
          _res.push(curJSON);
          return;
        };

      };
      test.init();

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122027

You could use forEach with reduce methods to loop your data and build the nested data structure where you also check if the current element is either last node in the tree or if the value is null and then not add the children property.

const data = [
  ['SU1', 'DU1', 'ST1'],
  ['SU1', 'DU1', 'ST2'],
  ['SU1', 'DU2', null],
  ['SU2', 'DU3', 'ST3'],
  ['SU3', null, null]
];


const result = []
const tree = {result}

data.forEach(a => {
  a.reduce((r, name, i, arr) => {
    if (!r[name]) {
      const obj = {name}
      r[name] = {result: []}

      if (arr[i + 1] && name != null) {
        obj.children = r[name].result
      }

      r.result.push(obj)
    }

    return r[name]
  }, tree)
})

console.log(result)

Upvotes: 1

Nick
Nick

Reputation: 52

Export your table to CSV and use a D3 parser

https://github.com/d3/d3-dsv

Upvotes: 0

Related Questions