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

Question

我输入如下。它是一个对象数组，每个对象都有状态，这也是一个对象数组。当状态 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

应该这样做

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

Answer 2

Array.forEach总是returnsundefined，所以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 3

您可以使用 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)

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

Iterate nested array of objects, find id and update object matching the id

javascript

arrays

loops

object

reactjs