如何在另一个数组中的数组中添加键值对

Question

// 我有以下响应：

    [
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",

"company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },


 {
    "userId": 2,
    "id": 4,
    "title": "fugiat veniam minus",

"company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },

 ]

//我想在两个地方添加这个键值对（“完成”：false），使它看起来像下面的响应：

[
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
     **"completed": false**

"company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
       **"completed": false**
    }
  },


 {
    "userId": 2,
    "id": 4,
    "title": "fugiat veniam minus",
     **"completed": false**
     "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
     **"completed": false**
    }
  },  
  
]

..................................................... ..................................................... .....................

Answer 1

如果要保留原始数据并将数组视为immutable ，可以使用map()和扩展运算符。

 const users = [ { userId: 1, id: 3, title: "fugiat veniam minus", company: { name: "Deckow-Crist", catchPhrase: "Proactive didactic contingency", bs: "synergize scalable supply-chains", }, }, { userId: 2, id: 4, title: "fugiat veniam minus", company: { name: "Deckow-Crist", catchPhrase: "Proactive didactic contingency", bs: "synergize scalable supply-chains", }, }, ]; const revisedUsers = users.map(user => ({...user, completed: false, company: {...user.company, completed: false } })) console.log(` ----------------- Result -----------------`) console.log(revisedUsers);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 2

Array.map可以解决您的问题。

const result = input.map(x => {
    x.completed = false;
    x.company = x.company.map(c => ({ ...c, completed: false }))
    return x;
})

您可以查看已完成的演示：

 const input = [{ "userId": 1, "id": 3, "title": "fugiat veniam minus", "company": [{ "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" }, { "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" }] }, { "userId": 2, "id": 4, "title": "fugiat veniam minus", "company": [{ "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" }, { "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" }] }, ]; const result = input.map(x => { x.completed = false; x.company = x.company.map(c => ({...c, completed: false })) return x; }) console.log(result);

Answer 3

数组操作

您可以使用Array.prototype.map将您的数组 map 转换为一个新数组，该数组循环遍历数组的每个项目，您可以从回调 ZC1C425268E68385D1AB5074C17A94F14 返回任何类型的数据以添加到新数组中。

const mappedArray = yourArray.map(user => {
    user.completed = false;
    user.company.completed = false;
    return user;
});

使用扩展运算符

const mappedArray = yourArray.map(user => {
    return {
        ...user,
        completed: false,
        company: {
            ...user.company,
            completed: false,
        }
    };
});

Answer 4

您可以通过多种方式来实现向对象数组添加属性。 考虑到您在数据变量中有响应，我将编写一个简单的数组 map function 来演示

data = data.map((obj) => ({ ...obj, company: { ...obj.company, completed: false }, completed: false }));

Answer 5

将...运算符与Array.map一起使用：

 const arr = [ { "userId": 1, "id": 3, "title": "fugiat veniam minus", "company": { "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" } }, { "userId": 2, "id": 4, "title": "fugiat veniam minus", "company": { "name": "Deckow-Crist", "catchPhrase": "Proactive didactic contingency", "bs": "synergize scalable supply-chains" } } ]; console.log(arr.map(arrObj => ({...arrObj, company: {...arrObj["company"], completed: false}, completed: false})));