CODEWITHSUNDEEP
javascriptarraysjsontreejavascript-objects
Winter
Winter

Reputation: 2517

js - how to turn table data into a tree (JSON)

I am getting JSON data from a table which looks something like this (very simplified):

table data

the JSON format I am getting is the following:

const myObjOriginal = {
  "rows": [{
    "name": "row 1",
    "cells": [{
      "name": "level 1",
      "id": 1
    }, {
      "name": "first level 2",
      "id": 2
    }, {
      "name": "endpoint 1",
      "id": 4
    }]
  }, {
    "name": "row 2",
    "cells": [{
      "name": "level 1",
      "id": 1
    }, {
      "name": "first level 2",
      "id": 2
    }, {
      "name": "endpoint 2",
      "id": 5
    }]
  }, {
    "name": "row 3",
    "cells": [{
      "name": "level 1",
      "id": 1
    }, {
      "name": "second level 2",
      "id": 3
    }, {
      "name": "endpoint 3",
      "id": 6
    }]
  }]
};

What I need to do with this is to turn it into a tree instead of a table, with output that looks like this:

const goalObject = [{
  "name": "level 1",
  "id": 2,
  "children": [{
    "name": "first level 2",
    "id": 2,
    "children": [{
      "name": "endpoint 1",
      "id": 4
    }, {
      "name": "endpoint 2",
      "id": 5
    }]
  }, {
    "name": "second level 2",
    "id": 3,
    "children": [{
      "name": "endpoint 3",
      "id": 6
    }]
  }]
}];

I have tried all kinds of things, both map, reduce, filter, for loops, and forEach but to no avail.

I realize that I will need to make a recursive function somehow, but I have not gotten that to work either.

Here is an example of one thing that I have tried, but I know it is completely wrong...

function getChildrenOfCurrentItem(rowIndex = 0, cellIndex = 0) {
  let current = {};
  let myObj = {};

  for(let i = 0; i < myCopy.rows.length; i++){
    next = myCopy.rows[i].cells[cellIndex];
    const cells = myCopy.rows[i].cells;
    const isSame = compareObjects(current, next);

    if(!isSame){
      current = next;
      myObj.item = current;
      //cellIndex++;

      for(let j = 0; j < cells.length; j++){
        let cell = cells[j];
        console.log('cell', cell);
      }
    }

    console.log('myObj', myObj);

    //cellIndex++;
    if(cellIndex < max) {
        getChildrenOfCurrentItem(rowIndex, cellIndex);
    }
    rowIndex++;
  }
  return myObj;
}

Upvotes: 3

Views: 919

Answers (1)

Nina Scholz
Nina Scholz

Reputation: 386550

You could use an iterative approach by looking for the group with the same id.

var data = { rows: [{ name: "row 1", cells: [{ name: "level 1", id: 1 }, { name: "first level 2", id: 2 }, { name: "endpoint 1", id: 4 }] }, { name: "row 2", cells: [{ name: "level 1", id: 1 }, { name: "first level 2", id: 2 }, { name: "endpoint 2", id: 5 }] }, { name: "row 3", cells: [{ name: "level 1", id: 1 }, { name: "second level 2", id: 3 }, { name: "endpoint 3", id: 6 }] }] },
    result = [];

data.rows.forEach(({ cells }) => {
    cells.reduce((level, { name, id }) => {
        var temp = (level.children = level.children || []).find(o => o.id === id);
        if (!temp) {
            temp = { name, id };
            level.children.push(temp);
        }
        return temp;
    }, { children: result });
});

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Upvotes: 2

Related Questions