如何使用数组 JavaScript 访问 object 上的嵌套键？

Question

我想进行层次角色布局。 所以我想在 object 中访问嵌套的 JavaScript 数组。 需要在每个基于 object 的深度和索引中添加“行”和“列”键。

API 响应数组如下：

const dataArray = [
  {
    name: "master name",
    child: [
      {
        name: "child 1a",
        child: [
          { name: "child 1a2a" },
          {
            name: "child 1a2b",
            child: [
              { name: "child 2b3a" },
              {
                name: "child 2b3b",
                child: [
                  { name: "child 3b4a" },
                  { name: "child 3b4b" },
                  { name: "child 3b4c" },
                ],
              },
              { name: "child 2b3c" },
            ],
          },
          { name: "child 1a2c" },
        ],
      },
      {
        name: "child 1b",
        child: [
          { name: "child 1b2a" },
          { name: "child 1b2b" },
          { name: "child 1b2c" },
        ],
      },
    ],
  },
];

这是我尝试过的，行键添加了以下代码，需要列的帮助

 const assignDepth = (arr, row = 0, index = 0) => {
        if (index < arr.length) {
          arr[index].row = row;
          if (arr[index].hasOwnProperty("child")) {
            return assignDepth(arr[index].child, row + 1, 0);
          }
          return assignDepth(arr, row, index + 1);
        }
        return;
      };
      await assignDepth(dataArray);
      console.log(JSON.stringify(dataArray, undefined, 4));

那么我的预期结果数组是：

const resultArray = [
  {
    name: "master name",
    row: 0,
    column: 0,
    child: [
      {
        name: "child 1a",
        row: 1,
        column: 1,
        child: [
          { name: "child 1a2a", row: 2, column: 1 },
          {
            name: "child 1a2b",
            row: 2,
            column: 2,
            child: [
              { name: "child 2b3a", row: 3, column: 1 },
              {
                name: "child 2b3b",
                row: 3,
                column: 2,
                child: [
                  { name: "child 3b4a", row: 4, column: 1 },
                  { name: "child 3b4b", row: 4, column: 2 },
                  { name: "child 3b4c", row: 4, column: 3 },
                ],
              },
              { name: "child 2b3c", row: 3, column: 3 },
            ],
          },
          { name: "child 1a2c", row: 2, column: 3 },
        ],
      },
      {
        name: "child 1b",
        row: 1,
        column: 2,
        child: [
          { name: "child 1b2a", row: 2, column: 4 },
          { name: "child 1b2b", row: 2, column: 5 },
          { name: "child 1b2c", row: 2, column: 6 },
        ],
      },
    ],
  },
];

那么我该如何渲染这个，任何人都可以帮助我。 提前致谢！

Answer 1

你可以试试下面的逻辑：

var ranking = {0:0};
let addRowColumn = (data,row=0) =>{
    data.forEach(item=>{
        item.row = row;
        item.column = ranking[row];
        ranking[row]+=1;
        if(item.child && item.child.length){
            ranking[row+1] = ranking[row+1] || 1;
            addRowColumn(item.child,row+1);
        }
        
    });
};

addRowColumn(dataArray);

console.log(dataArray);

这是经过测试的。 您可以更改排名 object 以从特定行和列开始。 object的key代表行，value代表数据的列。