Question

我想知道如何使用JavaScript在嵌套数组对象中获取数组对象。以下是对象obj，应获取状态为Active和Updated的children1的obj。


var obj = [{
   "id": 1,
   "status":"updated",
   "code": "product",
   "children": [
     {
        "id" : 20,
      "title": "cafe",
      "children1": [
        {"id": "2", "title": "SG", "status": "Active"},
        {"id": "3", "title": "TH", "status": "Updated"},
        {"id": "4", "title": "MY", "status": "Deleted"}
      ]
     },
     {
        "id" : 21,
      "title": "others",
      "children1": [
        {"id": "5", "title": "tours", "status": "Active"},
        {"id": "6", "title": "services", "status": "Updated"},
        {"id": "7", "title": "finance", "status": "Deleted"}
      ]
     }
   ]
}]


function getActiveUpdtedObj (obj){
  var result = obj.filter(e=>e.children.filter(i=>i.children1.status !=="Deleted"));
  console.log(result);
}

this.getActiveUpdtedObj(obj);

预期结果

[{
   "id": 1,
   "status":"updated",
   "code": "product",
   "children": [
     {
        "id" : 20,
      "title": "cafe",
      "children1": [
        {"id": "2", "title": "SG", "status": "Active"},
        {"id": "3", "title": "TH", "status": "Updated"}
      ]
     },
     {
        "id" : 21,
      "title": "others",
      "children1": [
        {"id": "5", "title": "tours", "status": "Active"},
        {"id": "6", "title": "services", "status": "Updated"}
      ]
     }
   ]
}]

Answer 1

更新：

因此，首先您使用obj遍历.map数组（它是一个数组，而不是一个对象），并返回同一当前对象（使用扩展运算符{...o}），并使用新过滤的children数组覆盖children属性。

现在，如何获取这个新过滤的children数组？

在当前对象的.map属性上使用.children执行另一次迭代，访问child的{{1}}属性并对其进行过滤。通过使用新过滤的数组覆盖其children1属性，构造并返回新的子对象（与散布运算符相同）。完成，现在您有了新的顶级children1数组。

children

Answer 2

一种可能的方法如下：

function getActiveUpdtedObj(obj) {
  var result = obj.map(e => {
    e.children = e.children.map(child => {
      child.children1 = child.children1.filter(c => c['status'] !== "Deleted");
      return child
    });
    return e
  });
}

在最顶层，您可能想对对象本身进行map（意味着变换每个元素），然后对于每个元素，您只想编辑其children.children1数据。此时，您将需要filter。

注释：

您也可以执行reduce，但这会更加复杂； D
您可以检出lodash库，它非常适合进行集合操作https://lodash.com/docs

Answer 3

您可以对原始对象进行突变，例如：

var obj = [
  {
    id: 1,
    status: 'updated',
    code: 'product',
    children: [
      {
        id: 20,
        title: 'cafe',
        children1: [
          { id: '2', title: 'SG', status: 'Active' },
          { id: '3', title: 'TH', status: 'Updated' },
          { id: '4', title: 'MY', status: 'Deleted' },
        ],
      },
      {
        id: 21,
        title: 'others',
        children1: [
          { id: '5', title: 'tours', status: 'Active' },
          { id: '6', title: 'services', status: 'Updated' },
          { id: '7', title: 'finance', status: 'Deleted' },
        ],
      },
    ],
  },
];

for (const { children } of obj) {
  for (const child of children) {
    child.children1 = child.children1.filter(e => e.status !== 'Deleted');
  }
}
console.log(JSON.stringify(obj));

Answer 4

我们可以使用map，filter和rest运算符来获得所需的结果：

const result = arr.map(({children, ...rest}) => ({...rest, 
  children: children.map(({children1, ...rest1 }) => ({ ...rest1, 
      children1: children1.filter(f => f.status == 'Active' 
          || f.status == 'Updated') }))}))

一个例子：

let arr = [{
   "id": 1,
   "status": "updated",
   "code": "product",
   "children": [
      {
         "id": 20,
         "title": "cafe",
         "children1": [
            { "id": "2", "title": "SG", "status": "Active" },
            { "id": "3", "title": "TH", "status": "Updated" },
            { "id": "4", "title": "MY", "status": "Deleted" }
         ]
      },
      {
         "id": 21,
         "title": "others",
         "children1": [
            { "id": "5", "title": "tours", "status": "Active" },
            { "id": "6", "title": "services", "status": "Updated" },
            { "id": "7", "title": "finance", "status": "Deleted" }
         ]
      }
   ]
}]

const result = arr.map(({children, ...rest}) => ({...rest, children: children.map(({children1, ...rest1 }) =>
   ({ ...rest1, children1: children1.filter(f => f.status == 'Active' || f.status == 'Updated') }))}))
console.log(result);

Answer 5

我认为，更好的方法是使用此代码中的数组方法map（）和filter（）

function getActiveUpdtedObj (obj){
  var result = obj.map(object => ({
    ...object,
    children: object.children.map(child => ({
       ...child,
       children1: child.children1.filter(child1 => child1.status !== 'Deleted')
    }))
  }));
  console.log(result);
}

让我们知道答案是否有帮助

如何在对象数组的嵌套数组中获取数组对象

5 个答案: