javascript - 从嵌套 JavaScript 对象插入/删除数据

Question

我正在使用react.js 来管理嵌套“项目”列表。我的对象看起来像这样:

const items = [
  {
    _id: 0,
    content: 'Item 1 something',
    note: 'Some note for item 1'
  },
  {
    _id: 5,
    content: 'Item 1.1 something',
    note: 'Some note for item 1.1'
  },
  {
    _id: 1,
    content: 'Item 2 something',
    note: 'Some note for item 2',
    subItems: [
      {
        _id: 2,
        parent_id: 1,
        content: 'Sub Item 1 something',
        subItems: [{
          _id: 3,
          parent_id: 2,
          content: 'Sub Sub Item 4'
        }]
      }
    ]
  }
];

假设我只有任何项目的_id。如何在任何级别(顶级或嵌套)在我有 _id 的项目之前/之后插入另一个项目，以及如何在我只有 _id 的情况下删除任何级别的项目。

由于我使用的是react.js，我如何以不可变的方式执行这些操作？

Answer 1

您可以为此创建递归函数。首先，您可以使用 JSON parse/stringify 克隆数组，这不是最好的方法，但在这种情况下可以使用，然后您可以使用 for...in 循环来循环数据如果在某个对象中找到 id，它将使用 unshift 将新项目添加到该数组的开头。

const items = [{"_id":0,"content":"Item 1 something","note":"Some note for item 1"},{"_id":5,"content":"Item 1.1 something","note":"Some note for item 1.1"},{"_id":1,"content":"Item 2 something","note":"Some note for item 2","subItems":[{"_id":2,"parent_id":1,"content":"Sub Item 1 something","subItems":[{"_id":3,"parent_id":2,"content":"Sub Sub Item 4"}]}]}]  

function addItem(data, item, id) {
  data = JSON.parse(JSON.stringify(data))

  function inner(data, item, id, parent) {
    for (var i in data) {
      if (data[i]._id == id) {
        parent.unshift(item)
        return;
      }
      if (data[i] && data[i].hasOwnProperty('subItems')) {
        inner(data[i].subItems, item, id, data[i].subItems)
      }
    }
  }
  inner(data, item, id, data)
  return data;
}

var newItem = {
  name: 'Lorem',
  age: 20
}
console.log(addItem(items, newItem, 3))

如果您想删除而不是添加项目，可以使用splice(i, 1)

const items = [{"_id":0,"content":"Item 1 something","note":"Some note for item 1"},{"_id":5,"content":"Item 1.1 something","note":"Some note for item 1.1"},{"_id":1,"content":"Item 2 something","note":"Some note for item 2","subItems":[{"_id":2,"parent_id":1,"content":"Sub Item 1 something","subItems":[{"_id":3,"parent_id":2,"content":"Sub Sub Item 4"}]}]}]  


function addItem(data, item, id) {
  data = JSON.parse(JSON.stringify(data))

  function inner(data, item, id, parent) {
    for (var i in data) {
      if (data[i]._id == id) {
        data.splice(i, 1)
        return
      }
      if (data[i] && data[i].hasOwnProperty('subItems')) {
        inner(data[i].subItems, item, id, data[i].subItems)
      }
    }
  }
  inner(data, item, id, data)
  return data;
}

console.log(addItem(items, '', 2))