How to Add New Key on Array of Json Data On React

Question

I Have json data and i want to manipulate it and store in state setNewdata

const [newdata, setNewdata] = useState([])   
const data = [{
            id: 2048,
            title: 'フューチャーワークス',
            account_title_id: 1,
            detailed_id: 1,
            currency_id: 2,
          },
          {
            id: 2056,
            title: 'ああああああ',
            account_title_id: 1,
            detailed_id: 2,
            currency_id: 2,
          },
    ]

i want to mainpulate this json to add two key there is label and value in react

[{
            id: 2048,
            title: 'フューチャーワークス',
            account_title_id: 1,
            detailed_id: 1,
            currency_id: 2,
            label: 'フューチャーワークス - 2048', // combine from id and title
            value: '1 - 1 - 2', // combine from  account_title_id,detailed_id
          },
          {
            id: 2056,
            title: 'ああああああ',
            account_title_id: 1,
            detailed_id: 2,
            currency_id: 2,
            label: 'ああああああ - 2048', // combine from id and title
            value: '1 - 2 - 2', // combine from  account_title_id,detailed_id,currency_id
          },
    ]



data.forEach((current) => {
      ,....
})

DecPK · Accepted Answer · 2021-11-29 08:01:00Z

3

You can make use of map here and It will return a new array and set the data as:

setNewData(result);

const data = [
  {
    id: 2048,
    title: "フューチャーワークス",
    account_title_id: 1,
    detailed_id: 1,
    currency_id: 2,
  },
  {
    id: 2056,
    title: "ああああああ",
    account_title_id: 1,
    detailed_id: 2,
    currency_id: 2,
  },
];

const result = data.map((o) => ({
  ...o,
  label: `${o.title} - ${o.id}`,
  value: `${o.account_title_id} - ${o.detailed_id} - ${o.currency_id}`,
}));

// setNewData(result);
console.log(result);

answered Nov 29, 2021 at 8:01

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2021-11-29 08:06:29Z

map over the array to produce a new array of objects.

For each object I would destructure the properties, and then piece them back together in a new object with the new label and value properties.

Update state with the returned array.

const data=[{id:2048,title:"フューチャーワークス",account_title_id:1,detailed_id:1,currency_id:2},{id:2056,title:"ああああああ",account_title_id:1,detailed_id:2,currency_id:2}];

const out = data.map(obj => {

  const {
    id,
    title,
    account_title_id,
    detailed_id,
    currency_id
  } = obj;

  return {
    id,
    title,
    account_title_id,
    detailed_id,
    currency_id,
    label: `${title} - ${id}`,
    value: `${account_title_id} - ${detailed_id} - ${currency_id}`
  };

});

console.log(out);

Khéops · Accepted Answer · 2021-11-29 08:00:05Z

0

here a foreach on data to implement new properties to your Array

data.forEach(element => {
    element.label = element.title + " - " + element.id
    element.value = element.account_title_id + " - " + element.detailed_id + " - " + element.currency_id
})

answered Nov 29, 2021 at 8:00

Khéops

464 bronze badges

Comments

AmehPls · Accepted Answer · 2021-11-29 08:04:13Z

Explanation

First, to add a key value pair to a json object, you can simply use the dot notation. In this case, by using datas.label = newValue, it will create a new property label with a value of newValue. You can do this for every object in the datas array by doing a for...of loop.

Next, to store the manipulated datas in the state, you can simply call setnewData(datas), where datas is the mainuplated data array.

Code

const [newdata, setNewdata] = useState([])   
const datas = [{
            id: 2048,
            title: 'フューチャーワークス',
            account_title_id: 1,
            detailed_id: 1,
            currency_id: 2,
          },
          {
            id: 2056,
            title: 'ああああああ',
            account_title_id: 1,
            detailed_id: 2,
            currency_id: 2,
          },
    ]

for(var data of datas){
  data.label = [data.title, ' - ', data.id].join('')
  data.value = [data.account_title_id,' - ', data.detailed_id, ' - ', data.currency_id].join('')
}
setNewdata(datas)

Collectives™ on Stack Overflow

How to Add New Key on Array of Json Data On React

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related