For most cases the easiest way for manipulating and displaying data with Javascript is when it is organized as an array of objects.
Usually, we get data like that from an api. But in some cases, the data is organized as nested objects.
The problem
While working on a Crypto currency SPA project we used cryptocompare API
to compare crypto coins to USD.
The returned data looks something like this (json format):
{"BTC":{"USD":18188.04},"ETH":{"USD":557.07}}
But we wanted it to be organized like:
[
{name:"BTC",currency:"USD",value:'181.88.04'},
{name:"ETH",currency:"USD",value:'557.07'}
]
The solution
So we googled...
and found out about Object.entries(obj)
part 1
This method returns an array. Each item in the array is another array that has the first item as a key and the second as its key value.
It looks like this:
const coins = { BTC: { USD: 18188.04 }, ETH: { USD: 557.07 } };
console.log(Object.entries(coins));
//[ [ 'BTC', { USD: 18188.04 } ], [ 'ETH', { USD: 557.07 } ] ]
part 2
Ok, this is a good start. Now we can use map()
to turn it into an array of objects.
And it should look like:
coinsToArr = coinsToArr.map(([name, data]) => ({ name, data }));
// [ { name: 'BTC', data: { USD: 18188.04 } }, { name: 'ETH', data: { USD: 557.07 } } ]
part 3
Now it looks much better and easier to work with. But it's not exactly what we wanted to achieve.
We have the same kind of problem but now the object is nested in the new object we created.
Assuming we will get only one currency each time we used the same method as above inside the first map function :
coinsToArr = coinsToArr.map(([name, data]) => {
data = Object.entries(data);
data = data.map(([currency, value]) => ({ currency, value }));
return {
name,
currency: data[0].currency,
value: data[0].value,
};
});
// [ { name: 'BTC', currency: 'USD', value: 18188.04 }, { name: 'ETH', currency: 'USD', value: 557.07 }]
Now this is what we wanted.
part 4
Refactoring and turning it into a function
const coinsObjToArr = (obj) => {
//using Object.entries().map()
return Object.entries(obj).map(([name, data]) => {
//getting the currency and value using Object.entries().map() 2nd time
const { currency, value } = Object.entries(data).map(
([currency, value]) => ({
currency,
value,
})
// getting the first and only item from the array
)[0];
return {
//return all values as object
name,
currency,
value,
};
});
};
I know it might look hard to understand because of all the destractuaring and chaining methods but it's just all the parts connected.
We simply used Object.entries()
and map()
twice, nested.
References:
Hope it was helpful.
Top comments (2)
That feels like a lot of work. If you are looping through a plain object the
for..in
loop could help.This works.
Thanks, interesting!
I'm sure there is more than one solution for this type of problem. I just wanted to share with something new I learned.