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) => {
,....
})
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);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);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
})