I am working on a react app where I am fetching a JSON response from a route which is basically a list of JSON objects.

Now I want to add a field in every JSON object according to another field in that JSON object:

Here's my response:

{
  messages: [
    {
      msgId: "2021082111010755885",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-21 11:01:07.89554",
      modifiedAt: "2021-08-21 11:01:07.89554",
      count: 0,
    },
    {
      msgId: "2021082012204615964",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:31:06.622",
      count: 5,
    },
    {
      msgId: "2021082012204575430",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:27:06.473",
      count: 3,
    },
    {
      msgId: "2021082012204613152",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:28:06.517",
      count: 3,
    },
  ];
}

Now I want to insert a field named mString which is status+"A" where status is from the same object.I want to insert it in every object in the above array.How can I do this?

I am working on a react app where I am fetching a JSON response from a route which is basically a list of JSON objects.

Now I want to add a field in every JSON object according to another field in that JSON object:

Here's my response:

{
  messages: [
    {
      msgId: "2021082111010755885",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-21 11:01:07.89554",
      modifiedAt: "2021-08-21 11:01:07.89554",
      count: 0,
    },
    {
      msgId: "2021082012204615964",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:31:06.622",
      count: 5,
    },
    {
      msgId: "2021082012204575430",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:27:06.473",
      count: 3,
    },
    {
      msgId: "2021082012204613152",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:28:06.517",
      count: 3,
    },
  ];
}

Now I want to insert a field named mString which is status+"A" where status is from the same object.I want to insert it in every object in the above array.How can I do this?

• javascript
• arrays
• reactjs
• json

4 Answers 4

Just loop though array and add

const data = {
  "messages": [
    {
      "msgId": "2021082111010755885",
      "interfaceId": 5,
      "status": "QUEUED",
      "createdAt": "2021-08-21 11:01:07.89554",
      "modifiedAt": "2021-08-21 11:01:07.89554",
      "count": 0,

    },
    {
      "msgId": "2021082012204615964",
      "interfaceId": 5,
      "status": "QUEUED",
      "createdAt": "2021-08-20 12:20:46.187297",
      "modifiedAt": "2021-08-20 12:31:06.622",
      "count": 5,

    },
    {
      "msgId": "2021082012204575430",
      "interfaceId": 5,
      "status": "QUEUED",
      "createdAt": "2021-08-20 12:20:46.187297",
      "modifiedAt": "2021-08-20 12:27:06.473",
      "count": 3,

    },
    {
      "msgId": "2021082012204613152",
      "interfaceId": 5,
      "status": "QUEUED",
      "createdAt": "2021-08-20 12:20:46.187297",
      "modifiedAt": "2021-08-20 12:28:06.517",
      "count": 3,

    }
  ]
}

data.messages.forEach((node) => node.mString = node.status + "A");

console.log(data);

In React I would suggest generally using an immutable update pattern where you return a new array with the element object properties you want. This uses Array.prototype.map.

const newData = {
  ...data,
  messages: data.messages.map(el => ({
    ...el,
    mString: el.status + "A",
  })),
};

const data = {
  messages: [
    {
      msgId: "2021082111010755885",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-21 11:01:07.89554",
      modifiedAt: "2021-08-21 11:01:07.89554",
      count: 0,
    },
    {
      msgId: "2021082012204615964",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:31:06.622",
      count: 5,
    },
    {
      msgId: "2021082012204575430",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:27:06.473",
      count: 3,
    },
    {
      msgId: "2021082012204613152",
      interfaceId: 5,
      status: "QUEUED",
      createdAt: "2021-08-20 12:20:46.187297",
      modifiedAt: "2021-08-20 12:28:06.517",
      count: 3,
    },
  ],
};

const newData = {
  ...data,
  messages: data.messages.map(el => ({
    ...el,
    mString: el.status + "A",
  })),
};

console.log(newData);

I did not understand you very well in the last part but I think this is what you want

 object.messages.map(element=> {
   element.mystring=el.status + "A"
    return  element
}))

your need to access to "messages" in your JSON with dot notation

object.messages is an array you can map the objects inside (map)

Mutate your JSON object using forEach method. But if you have a huge JSON mutate it on BE side, instead FE or use Web Workers for this issue

const data = {
"messages": [
{
"msgId": "2021082111010755885",
"interfaceId": 5,
"status": "QUEUED",
"createdAt": "2021-08-21 11:01:07.89554",
"modifiedAt": "2021-08-21 11:01:07.89554",
"count": 0,

},
{
"msgId": "2021082012204615964",
"interfaceId": 5,
"status": "QUEUED",
"createdAt": "2021-08-20 12:20:46.187297",
"modifiedAt": "2021-08-20 12:31:06.622",
"count": 5,

},
{
"msgId": "2021082012204575430",
"interfaceId": 5,
"status": "QUEUED",
"createdAt": "2021-08-20 12:20:46.187297",
"modifiedAt": "2021-08-20 12:27:06.473",
"count": 3,

},
{
"msgId": "2021082012204613152",
"interfaceId": 5,
"status": "QUEUED",
"createdAt": "2021-08-20 12:20:46.187297",
"modifiedAt": "2021-08-20 12:28:06.517",
"count": 3,

}
]
}

data.messages.forEach(item => { item['mString'] = `${item.status} + A` });

console.log(data);