Clash Royale CLAN TAG

Best way to format JSON data into valid array?

I've been given some data (random example shown below) and I would like to format it into the following (with different example to random example but same format):
EDIT: Details: the "total_sales" for each top level "key", so "car" at "2018-07-20" would have "3850" and "phone" would have "4678".

The numbers in both format and example do not represent each other.

export const formatted = [
{date: "19/6/18", car: 60, phone: 30},
{date: "20/6/18", car: 36, phone: 40},
{date: "21/6/18", car: 34, phone: 81},
{date: "22/6/18", car: 27, phone: 30},
{date: "23/6/18", car: 24, phone: 23},
{date: "24/6/18", car: 73, phone: 10},
{date: "25/6/18", car: 23, phone: 70},
{date: "26/6/18", car: 27, phone: 65},
{date: "27/6/18", car: 24, phone: 63},
{date: "28/6/18", car: 67, phone: 20},
{date: "29/6/18", car: 36, phone: 70},
];


I can only think of using map() inefficiently with loops. But is there any better way to automatically do this filtering? (like compliments of map(),reduce(),filter()?)

export const unformatted = [
{
key: "car",
doc_count: 26,
sales_over_time: {
buckets: [
{
key_as_string: "2018-07-20",
key: 1532088000000,
doc_count: 1,
total_sales: {
value: 3850
}
},
{
key_as_string: "2018-07-21",
key: 1532174400000,
doc_count: 1,
total_sales: {
value: 260
}
},
{
key_as_string: "2018-07-22",
key: 1532260800000,
doc_count: 3,
total_sales: {
value: 0
}
},
{
key_as_string: "2018-07-23",
key: 1532347200000,
doc_count: 1,
total_sales: {
value: 933
}
},
{
key_as_string: "2018-07-24",
key: 1532433600000,
doc_count: 2,
total_sales: {
value: 1902
}
}
]
}
},
{
key: "phone",
doc_count: 26,
sales_over_time: {
buckets: [
{
key_as_string: "2018-07-20",
key: 1532088000000,
doc_count: 1,
total_sales: {
value: 4678
}
},
{
key_as_string: "2018-07-21",
key: 1532174400000,
doc_count: 1,
total_sales: {
value: 2445
}
},
{
key_as_string: "2018-07-22",
key: 1532260800000,
doc_count: 3,
total_sales: {
value: 833
}
},
{
key_as_string: "2018-07-23",
key: 1532347200000,
doc_count: 1,
total_sales: {
value: 139
}
},
{
key_as_string: "2018-07-24",
key: 1532433600000,
doc_count: 2,
total_sales: {
value: 1102
}
}
]
}
}
]


This is just a learning experience and I'm only wanting to learn and provide layouts of how to format given data properly in JS React.

formatted

unformatted

1 Answer
1

One reduce and one find seem to do it. I defined cars/phones as separate objects to speed this up. Let me know if this helps. It should not be very difficult to get them same result from the array form you posted. Let me know if things will get you going or I missed something.

reduce

find

var cars = {
key: "car",
doc_count: 26,
sales_over_time: {
buckets: [
{
key_as_string: "2018-07-20",
key: 1532088000000,
doc_count: 1,
total_sales: {
value: 3850
}
},
{
key_as_string: "2018-07-21",
key: 1532174400000,
doc_count: 1,
total_sales: {
value: 260
}
},
{
key_as_string: "2018-07-22",
key: 1532260800000,
doc_count: 3,
total_sales: {
value: 0
}
},
{
key_as_string: "2018-07-23",
key: 1532347200000,
doc_count: 1,
total_sales: {
value: 933
}
},
{
key_as_string: "2018-07-24",
key: 1532433600000,
doc_count: 2,
total_sales: {
value: 1902
}
}
]
}
};
var phones = {
key: "phone",
doc_count: 26,
sales_over_time: {
buckets: [
{
key_as_string: "2018-07-20",
key: 1532088000000,
doc_count: 1,
total_sales: {
value: 4678
}
},
{
key_as_string: "2018-07-21",
key: 1532174400000,
doc_count: 1,
total_sales: {
value: 2445
}
},
{
key_as_string: "2018-07-22",
key: 1532260800000,
doc_count: 3,
total_sales: {
value: 833
}
},
{
key_as_string: "2018-07-23",
key: 1532347200000,
doc_count: 1,
total_sales: {
value: 139
}
},
{
key_as_string: "2018-07-24",
key: 1532433600000,
doc_count: 2,
total_sales: {
value: 1102
}
}
]
}
}

var result = cars.sales_over_time.buckets.reduce((result, value, index, array) => {
var phoneObj = phones.sales_over_time.buckets.find(phone => phone.key === value.key)
result.push({
date: value.key_as_string,
car: value.total_sales.value,
phone: phoneObj ? phoneObj.total_sales.value : 'N/A',
})
return result
}, )

console.log(result)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.