如何使用數組 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代表數據的列。