如何将数据设置为深度嵌套的数组

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。texas697正在寻找来自信誉良好的来源的答案。

我正在使用DevExtreme React Grid Tree。我的初始调用仅填充根行，单击时将应用每个其他子行。当存在许多嵌套表行时，应用子行数据时会遇到问题。我需要一种有效的方法来找到正确的父行并添加下一个嵌套数组。这是我已经添加了一个嵌套行的表数据。

    [
  {
    "area": "Artesia",
    "list_id": 45,
    "rowId": 158324175700860960,
    "parentRowId": 0,
    "items": [
      {
        "area": "Other",
        "list_id": 15003,
        "rowId": 158324179061139520,
        "parentRowId": 158324175700860960
      }
    ]
  },
  {
    "area": "Corpus Christi",
    "list_id": 60,
    "rowId": 158324175700847800,
    "parentRowId": 0,
    "items": []
  },
  {
    "area": "Midland",
    "list_id": 10,
    "rowId": 158324175700867700,
    "parentRowId": 0,
    "items": [
      {
        "area": "Delaware Basin",
        "list_id": 11001,
        "rowId": 158324181266273440,
        "parentRowId": 158324175700867700,
        "items": []
      }
    ]
  },
  {
    "area": "San Antonio",
    "list_id": 63,
    "rowId": 158324175700814050,
    "parentRowId": 0,
    "items": []
  }
]

单击Midland行之后，我将API返回数据作为嵌套数组项应用。

    [
  {
    "area": "Delaware Basin",
    "list_id": 11001,
    "rowId": 158324181266273440,
    "parentRowId": 158324175700867700,
    "items": []
  }
]

我需要一个函数，该函数可以将表数据从根级别循环到无限的嵌套行。我现在通过使用parentId来匹配rowId来匹配数据。

// root table data with one nested row applied to Midland
const tableData = [
  {
    "area": "Artesia",
    "list_id": 45,
    "rowId": 158324175700860960,
    "parentRowId": 0,
    "items": [
      {
        "area": "Other",
        "list_id": 15003,
        "rowId": 158324179061139520,
        "parentRowId": 158324175700860960
      }
    ]
  },
  {
    "area": "Corpus Christi",
    "list_id": 60,
    "rowId": 158324175700847800,
    "parentRowId": 0,
    "items": []
  },
  {
    "area": "Midland",
    "list_id": 10,
    "rowId": 158324175700867700,
    "parentRowId": 0,
    "items": [
      {
        "area": "Delaware Basin",
        "list_id": 11001,
        "rowId": 158324181266273440,
        "parentRowId": 158324175700867700,
        "items": []
      }
    ]
  },
  {
    "area": "San Antonio",
    "list_id": 63,
    "rowId": 158324175700814050,
    "parentRowId": 0,
    "items": []
  }
]

// return data from API after clicking on Delaware Basin
const returnData = [
  {
    "area": "Delaware Basin Nm",
    "list_id": 11007,
    "rowId": 158324182577224580,
    "parentRowId": 158324181266273440
  },
  {
    "area": "Delaware Basin Tx",
    "list_id": 11002,
    "rowId": 158324182577248960,
    "parentRowId": 158324181266273440
  }
]

function applyNestedData (tableData, returnData) {

}

applyNestedData(tableData, returnData)

Answer 1

function applyNestedData (tableData, returnData) {
  // use a map to group data by its parentRowId
  // in order to insert them together when find matched rowId
  const map = new Map()
  for (const data of returnData) {
    if (map.has(data.parentRowId)) {
      map.get(data.parentRowId).push(data)
    } else {
      map.set(data.parentRowId, [data])
    }
  }

  // Loop tree-structure data by queue
  const queue = []
  for (const data of tableData) { queue.push(data) }

  let data
  while (queue.length > 0) {
    data = queue.shift()
    if (map.has(data.rowId)) {
      data.items = data.items.concat(map.get(data.rowId))
    }
    if (data.items && data.items.length > 1) {
      for (const item of data.items) {
        queue.push(item)
      }
    }
  }
}

Answer 2

function applyNestedData (tableData, returnData) {
  const map = new Map();
  returnData.map(data=> {
    map.has(data.parentRowId)?
      map.get(data.parentRowId).push(data):map.set(data.parentRowId, [data])
  });
  const queue = [];
  tableData.map(data=>{queue.push(data)});

  let data;
  while (queue.length > 0) {
    data = queue.shift();
    map.has(data.rowId) && (data.items = data.items.concat(map.get(data.rowId)));
    (data.items && data.items.length > 1) && data.items.map(item=> {queue.push(item)})
  }
}