Looping over an array objects to get and display values

Question

i'm struggling with looping over the data found at this endpoint - https://blockchain.info/ticker.

I've used Axios to get the data and used Object.keys to return the object properties. I've then used Object.entries to get the values.

Whats the best way to map these values to variables which can then be used to display the data within a HTML table?

 axios.get('https://blockchain.info/ticker') 
      .then((response) => {

        const data = response.data;
        console.log(data);

        Object.keys(data).forEach(function (key) {
          console.log(data[key]);

          // console.log(Object.entries(data[key]));
          Object.entries(data[key]).forEach(function (item) {
            console.log(item[0] + ' : ' + item[1]);
          });

        });

      },
      (error) => {
        console.log(error);
      });

I checked the data returned in the URL you linked above, it's not an array of objects. It's an object that contains multiple objects — Olumide
– Olumide, Commented Nov 8, 2020 at 18:20
@Deniz yeah, so each row is for the currency displaying the relevant data. — moody1208
– moody1208, Commented Nov 8, 2020 at 18:26

Emiel Zuurbier · Accepted Answer · 2020-11-09 18:47:58Z

Based on the structure of the data returned by the API I would recommend looping over the keys of the first entry to create headers.

Then for each entry create a new row in which you add the currency and the values of the nested object to consecutive cells.

const data = {
  "USD" : {"15m" : 15573.3, "last" : 15573.3, "buy" : 15573.3, "sell" : 15573.3, "symbol" : "$"},
  "AUD" : {"15m" : 21457.05, "last" : 21457.05, "buy" : 21457.05, "sell" : 21457.05, "symbol" : "$"},
  "BRL" : {"15m" : 83547.66, "last" : 83547.66, "buy" : 83547.66, "sell" : 83547.66, "symbol" : "R$"},
  "CAD" : {"15m" : 20285.08, "last" : 20285.08, "buy" : 20285.08, "sell" : 20285.08, "symbol" : "$"},
  "CHF" : {"15m" : 14014.26, "last" : 14014.26, "buy" : 14014.26, "sell" : 14014.26, "symbol" : "CHF"},
  "CLP" : {"15m" : 1.170332014E7, "last" : 1.170332014E7, "buy" : 1.170332014E7, "sell" : 1.170332014E7, "symbol" : "$"},
  "CNY" : {"15m" : 102961.34, "last" : 102961.34, "buy" : 102961.34, "sell" : 102961.34, "symbol" : "¥"},
  "DKK" : {"15m" : 97734.47, "last" : 97734.47, "buy" : 97734.47, "sell" : 97734.47, "symbol" : "kr"},
  "EUR" : {"15m" : 13105.1, "last" : 13105.1, "buy" : 13105.1, "sell" : 13105.1, "symbol" : "€"},
  "GBP" : {"15m" : 11836.07, "last" : 11836.07, "buy" : 11836.07, "sell" : 11836.07, "symbol" : "£"},
  "HKD" : {"15m" : 120733.04, "last" : 120733.04, "buy" : 120733.04, "sell" : 120733.04, "symbol" : "$"},
  "INR" : {"15m" : 1152130.87, "last" : 1152130.87, "buy" : 1152130.87, "sell" : 1152130.87, "symbol" : "₹"},
  "ISK" : {"15m" : 2144288.09, "last" : 2144288.09, "buy" : 2144288.09, "sell" : 2144288.09, "symbol" : "kr"},
  "JPY" : {"15m" : 1608222.56, "last" : 1608222.56, "buy" : 1608222.56, "sell" : 1608222.56, "symbol" : "¥"},
  "KRW" : {"15m" : 1.747166782E7, "last" : 1.747166782E7, "buy" : 1.747166782E7, "sell" : 1.747166782E7, "symbol" : "₩"},
  "NZD" : {"15m" : 23004.93, "last" : 23004.93, "buy" : 23004.93, "sell" : 23004.93, "symbol" : "$"},
  "PLN" : {"15m" : 59039.79, "last" : 59039.79, "buy" : 59039.79, "sell" : 59039.79, "symbol" : "zł"},
  "RUB" : {"15m" : 1205867.33, "last" : 1205867.33, "buy" : 1205867.33, "sell" : 1205867.33, "symbol" : "RUB"},
  "SEK" : {"15m" : 134592.5, "last" : 134592.5, "buy" : 134592.5, "sell" : 134592.5, "symbol" : "kr"},
  "SGD" : {"15m" : 21000.68, "last" : 21000.68, "buy" : 21000.68, "sell" : 21000.68, "symbol" : "$"},
  "THB" : {"15m" : 476641.29, "last" : 476641.29, "buy" : 476641.29, "sell" : 476641.29, "symbol" : "฿"},
  "TRY" : {"15m" : 132762.41, "last" : 132762.41, "buy" : 132762.41, "sell" : 132762.41, "symbol" : "₺"},
  "TWD" : {"15m" : 445108.36, "last" : 445108.36, "buy" : 445108.36, "sell" : 445108.36, "symbol" : "NT$"}
};

const createTable = data => {
  const table = document.createElement('table');
  
  // Create headers.
  const headerRow = table.insertRow();
  
  // Empty cell for currency column.
  headerRow.insertCell();
  
  // Get the keys of the first item.
  Object.keys(Object.values(data)[0]).forEach(key => {
    const header = document.createElement('th');
    header.textContent = key;
    headerRow.append(header);
  });
  
  // Create rows of data.
  Object.entries(data).forEach(([ currency, values ]) => {
    const row = table.insertRow();
    const header = document.createElement('th');
    header.textContent = currency;
    row.append(header);
    Object.values(values).forEach(value => {
      row.insertCell().textContent = value;
    });
  });
  
  return table;
};

const table = createTable(data);
document.body.append(table);

table {
  border-collapse: collapse;
}

table th,
table td{
  font-family: sans-serif;
  border: 1px solid #d0d0d0;
  padding: 0.5em;
  text-align: left;
}

table tr:nth-of-type(even) th,
table tr:nth-of-type(even) td {
  background-color: #f0f0f0;
}

Collectives™ on Stack Overflow

Looping over an array objects to get and display values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related