Turn Object to Array using Object.entries()
Tags: javascript
Published: 2020-12-09 18:22:00

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](https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD)
to compare crypto coins to USD. 
The returned data looks something like this (json format): 

```json
{"BTC":{"USD":18188.04},"ETH":{"USD":557.07}}
```
But we wanted it to be organized like:

```json
  [
    {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:
```javascript
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:

```javascript
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 : 

```javascript
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 

```javascript
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:
- [Object.entries() at MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
- [Crypto currency SPA project](https://github.com/be-lev/Crypto-Project)
- [Simple example on my codePen](https://codepen.io/oryamne/pen/RwGGKLG)

Hope it was helpful.