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) => {
,....
})
CodePudding user response:
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);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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
})
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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)
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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);
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>