I was trying to make the data I'm having with me to a much more readable and easily understandable format. But I was stuck with it. is it possible to convert it into a readable format?
The data I'm having is in the format below
[
{
"c": [
{
"v": "Food Truck: The Vegan"
},
{
"v": "06/02/2022 16:00:00"
},
{
"v": "06/02/2022 21:00:00"
},
{
"v": "06/02/2022"
}
]
},
{
"c": [
{
"v": "Food Truck: Lob Dogs"
},
{
"v": "06/03/2022 16:00:00"
},
{
"v": "06/03/2022 21:00:00"
},
{
"v": "06/03/2022"
}
]
}}]
I want to convert it to a much more readable format like the example given below.
{
"name": "Food Truck: The Vegan Table",
"start_date": "06/02/2022 16:00:00",
"end_date": "06/02/2022 21:00:00",
"date": "06/02/2022"
},
{
"name": "Food Truck: Lob Dogs",
"start_date": "06/03/2022 16:00:",
"end_date": "06/03/2022 21:00:00",
"date": "06/03/2022"
}
]
How should I do this in javascript?
You can use Object.fromEntries with a separate keys array to map over your array and reformat each nested array.
const input = [{ "c": [{ "v": "Food Truck: The Vegan" }, { "v": "06/02/2022 16:00:00" }, { "v": "06/02/2022 21:00:00" }, { "v": "06/02/2022" }] }, { "c": [{ "v": "Food Truck: Lob Dogs" }, { "v": "06/03/2022 16:00:00" }, { "v": "06/03/2022 21:00:00" }, { "v": "06/03/2022" }] }]
const keys = ['name', 'start_date', 'end_date', 'date'];
const result = input.map(({ c }) => Object.fromEntries(
keys.map((key, i) => [key, c[i].v])
));
console.log(result)Or using some long-winded destructuring. (arguably the most descriptive...)
const input = [{ "c": [{ "v": "Food Truck: The Vegan" }, { "v": "06/02/2022 16:00:00" }, { "v": "06/02/2022 21:00:00" }, { "v": "06/02/2022" }] }, { "c": [{ "v": "Food Truck: Lob Dogs" }, { "v": "06/03/2022 16:00:00" }, { "v": "06/03/2022 21:00:00" }, { "v": "06/03/2022" }] }]
const result = input.map((
{ c:
[
{ v: name },
{ v: start_date },
{ v: end_date },
{ v: date }
]
}
) => (
{
name,
start_date,
end_date,
date
}
));
console.log(result)You just need to iterate over the raw data and restructure it in the way you desire. Since there are no proper keys for raw data, if the order or index is always the same, you can do it in the following way.
var data = [{
"c": [{
"v": "Food Truck: The Vegan"
},
{
"v": "06/02/2022 16:00:00"
},
{
"v": "06/02/2022 21:00:00"
},
{
"v": "06/02/2022"
}
]
},
{
"c": [{
"v": "Food Truck: Lob Dogs"
},
{
"v": "06/03/2022 16:00:00"
},
{
"v": "06/03/2022 21:00:00"
},
{
"v": "06/03/2022"
}
]
}
];
function processData(_raw) {
var processed = [];
_raw.forEach(_item => {
processed.push({
"name": _item.c[0].v,
"start_date": _item.c[1].v,
"end_date": _item.c[2].v,
"date": _item.c[3].v
});
});
return processed;
}
console.log(processData(data));Use a reduce method (format in the snippet) to map the elements of your array:
const keys = `name,start_date,end_date,date`.split(`,`);
const format = (acc, obj, i) => ( {...acc, [keys[i]]: obj.v} );
const dataFormatted = getData().map( v => v.c.reduce(format, {}) );
console.log(dataFormatted);
function getData() {
return [ {
"c": [
{ "v": "Food Truck: The Vegan" },
{ "v": "06/02/2022 16:00:00" },
{ "v": "06/02/2022 21:00:00" },
{ "v": "06/02/2022" } ]
}, {
"c": [
{ "v": "Food Truck: Lob Dogs" },
{ "v": "06/03/2022 16:00:00" },
{ "v": "06/03/2022 21:00:00" },
{ "v": "06/03/2022" } ]
} ];
}.as-console-wrapper {
max-height: 100% !important;
}