Question

迭代嵌套的对象数组，查找 id 并更新与 id 匹配的对象

2022-05-11

1340

javascript arrays reactjs loops object

我有以下输入。它是一个对象数组，每个对象都有状态，状态也是一个对象数组。当状态 ID 与下面提到的 id 匹配时，我想在状态对象内附加 details 。即 82175746

const input = 
[
    {
        "country": { "id": 87745195, "action": "Analyze" },
        "states": [
            { "id": 83589582, "action": "Verify" },
            { "id": 87335656, "action": "Analyze" }
        ]
    },
    {
        "country": { "id": 83861166, "action": "Verify" },
        "states": [
            { "id": 82175746, "action": "Closed" },
            { "id": 78745158, "action": "Closed" }
        ]
    }
]


const details = { "totalOpenRadars": 1, "totalClosedRadars": 1 }

const id = 82175746

这是我试图实现的结果。请注意，82175746 的 ID 与所有状态 ID 进行比较。一旦找到匹配项，上面提到的详细信息将附加到匹配的对象，如下所示。

const result = 
[
    {
        "country": { "id": 87745195, "action": "Analyze" },
        "states": [
            { "id": 83589582, "action": "Verify" },
            { "id": 87335656, "action": "Analyze" }
        ]
    },
    {
        "country": { "id": 83861166, "action": "Verify" },
        "states": [
            { "id": 82175746, "action": "Closed", "details": { "totalOpenRadars": 1, "totalClosedRadars": 1 } },
            { "id": 78745158, "action": "Closed" }
        ]
    }
]

为了实现这一点，我尝试了这种方法，但无法正确获得结果。有人可以告诉我我哪里做错了吗

const result  = input.forEach((element) => {
    element.states.forEach((state) => {
        if(state.id === id) {
            state.details = details
        }

    });
});

Answer 1

Array.forEach 始终返回 undefined ，因此 result 将始终为 undefined 。如果您在操作后查看 input ，它确实包含您指定的详细信息。

或者，如果您打算保持 input 不变，您可以将 input 展开到名为 result 的新数组中，然后在 result 上执行循环。

const input = 
[
    {
        "country": { "id": 87745195, "action": "Analyze" },
        "states": [
            { "id": 83589582, "action": "Verify" },
            { "id": 87335656, "action": "Analyze" }
        ]
    },
    {
        "country": { "id": 83861166, "action": "Verify" },
        "states": [
            { "id": 82175746, "action": "Closed" },
            { "id": 78745158, "action": "Closed" }
        ]
    }
]


const details = { "totalOpenRadars": 1, "totalClosedRadars": 1 }

const id = 82175746

input.forEach((element) => {
    element.states.forEach((state) => {
        if(state.id === id) {
            state.details = details
        }

    });
});
console.log(input);

Answer 2

您可以使用 Array.prototype.map() :

const input = [{"country": { "id": 87745195, "action": "Analyze" },"states": [{ "id": 83589582, "action": "Verify" },{ "id": 87335656, "action": "Analyze" }]},{"country": { "id": 83861166, "action": "Verify" },"states": [{ "id": 82175746, "action": "Closed" },{ "id": 78745158, "action": "Closed" }]}]
const details = { "totalOpenRadars": 1, "totalClosedRadars": 1 }
const id = 82175746

const result = input.map(item => item.states.map(state => ({
  ...state,
  ...(state.id === id ? { details } : {})
})))

console.log(result)

Answer 3

这应该可以做到

const appendDetails = (data, id, details) => 
  data.map(d => {
    return {
      ...d,
      states: d.states.map(s => {
        if(s.id !== id){
          return s
        }
        return {
          ...s,
          details
        }
      })
    } 
  })

const input = 
[
    {
        "country": { "id": 87745195, "action": "Analyze" },
        "states": [
            { "id": 83589582, "action": "Verify" },
            { "id": 87335656, "action": "Analyze" }
        ]
    },
    {
        "country": { "id": 83861166, "action": "Verify" },
        "states": [
            { "id": 82175746, "action": "Closed" },
            { "id": 78745158, "action": "Closed" }
        ]
    }
]


const details = { "totalOpenRadars": 1, "totalClosedRadars": 1 }

const id = 82175746

console.log(appendDetails(input, id, details))