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

Question

I want to make hierarchy role layout. So I want to access nested JavaScript array with in a object. Needs to add 'row' and 'column' key in every object based depth and index.

API response array like this:

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

This is what I have tried, row key added following code, need help for column

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

Then my expected result array is:

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

So how can I render this, Anyone help me out. Thanks in advance!

Answer 1

You can try the following logic:

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

This is tested. you can change the ranking object to start with a specific row and column. The key of object represents the row and value represents the column of data.