CODEWITHSUNDEEP
javascriptarraysjavascript-objects
moody1208
moody1208

Reputation: 559

Looping over an array objects to get and display values

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);
      });

Upvotes: 0

Views: 51

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20954

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;
}

Upvotes: 1

Related Questions