// I have the following response :

    [
  {
    "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"
    }
  },

 ]

//and I want to add this key-value pair in 2 places ("completed": false) to make it look like the following response:

[
  {
    "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**
    }
  },  
  
]

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

CodePudding user response：

You can use map() and the spread operator if you want to keep you original data and treat the array as immutable.

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; }

CodePudding user response：

Array.map can solve your problem.

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

You can check the completed demo:

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

CodePudding user response：

Using the ... operator with 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})));

CodePudding user response：

You can do it in multiple ways to achieve adding properties to an array of objects. I will write a simple array map function to demonstrate, considering you have a response in the variable of data

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

CodePudding user response：

Array manipulation

You can map your array into a new one using Array.prototype.map which loops over each item of an array and you can return any type of data from callback function to be added into new array.

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

Using spread operator

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