javascript - js - 如何将表数据转换为树 (JSON)

标签 javascript arrays json tree javascript-objects

我从一个看起来像这样(非常简单)的表中获取 JSON 数据:

table data

我得到的 JSON 格式如下:

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
    }]
  }]
};

我需要做的是将它变成一棵树而不是一张表,输出如下所示:

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
    }]
  }]
}];

我尝试了各种方法,包括 map、reduce、filter、for 循环和 forEach,但都无济于事。

我意识到我需要以某种方式创建一个递归函数,但我也没有让它工作。

这是我试过的一件事的例子,但我知道这是完全错误的......

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;
}

最佳答案

您可以通过查找具有相同 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; }

关于javascript - js - 如何将表数据转换为树 (JSON),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50529001/

相关文章:

javascript - 我可以使用嵌套的 jquery.proxy

javascript - Sequelize 等到循环完成回调

javascript - 如何根据嵌套对象数组中的键过滤对象数组?

javascript - React axios 发送多张图片表单数据

javascript - 从 JSON 属性加载 HTML img 元素的图像,而 URL 不能直接访问

javascript - 如何获取将数据提供给 div 的样式的值? [MyShop电子商务]

ios - var arr :[String] = [] and var arr = [String]() 之间的 Swift 区别

javascript - 由于范围问题,ng-click 不会在 ng-repeat 内触发

javascript - 如何在ajax中执行if else将数据传递给json

javascript - 如何 forEach where (angular.js)