Turn JSON into table pure javascript

Question

I am trying to make a table from my json so that there are two columns 'ask' and 'bid' with the data from the arrays in each row. Right now its just making four rows with numbers 1 - ∞.

jsondata =   {
            "ask": [
                350.5,
                346,
                341,
                336,
                331
            ],
            "bid": [
                346,
                341,
                336,
                331,
                326.5
            ]
        }
    
        for (var i in jsondata) {
                var table = document.getElementById("apps");
                var tr = document.createElement("tr");
                var td = document.createElement("td");
        
                for (var key in jsondata[i]) {
                  var txt = document.createTextNode(key);
                  td.appendChild(txt);
                  tr.appendChild(td);
                }
                table.appendChild(tr);
              }

<div>
            <table id="apps"></table>
</div>

What is data in inner for loop?

Aayush Mall
– Aayush Mall

2020-08-20 03:40:41 +00:00
Commented Aug 20, 2020 at 3:40 — Aayush Mall
– Aayush Mall, Commented Aug 20, 2020 at 3:40
It was a typo, updated

BNC Stocks
– BNC Stocks

2020-08-20 03:46:19 +00:00
Commented Aug 20, 2020 at 3:46 — BNC Stocks
– BNC Stocks, Commented Aug 20, 2020 at 3:46

kmoser · Accepted Answer · 2020-08-20 04:08:57Z

The easiest way is to loop through the asks and bids simultaneously, and add a <td> for each of them to the row:

jsondata = {
    ask: [350.5, 346, 341, 336, 331],
    bid: [346, 341, 336, 331, 326.5],
};

const asks = jsondata["ask"];
const bids = jsondata["bid"];

const table = document.getElementById("apps");

for (let i = 0; i < Math.min(asks.length, bids.length); i++) {
    var tr = document.createElement("tr"); // New row

    // Add the ask:
    var td = document.createElement("td");
    var txt = document.createTextNode(asks[i]);
    td.appendChild(txt);
    tr.appendChild(td);

    // Add the bid:
    td = document.createElement("td");
    txt = document.createTextNode(bids[i]);
    td.appendChild(txt);
    tr.appendChild(td);

    table.appendChild(tr); // Add this row to the table
}

Aayush Mall · Accepted Answer · 2020-08-20 03:55:16Z

You are using the for in statement for the inner for loop also. The for-in statement used over an array will give the key as array indexes not the value i.e 0,1,2.

Use for-of loop to get the elements of the array rather than indexes

for (const i in jsondata) {
  const table = document.getElementById("apps");
  const tr = document.createElement("tr");
  const td = document.createElement("td");

    for (const key of jsondata[i]) {
      const txt = document.createTextNode(key);
      td.appendChild(txt);
      tr.appendChild(td);
    }
  table.appendChild(tr);
}

Mister Jojo · Accepted Answer · 2020-08-24 05:25:51Z

simply use HTMLTableElement methods

const
  jsondata =
    { ask: [ 350.5, 346, 341, 336, 331,  246 ]
    , bid: [ 346,   341, 336, 331, 326.5 ]
    },
  tableApps = document.getElementById('apps')
  ;
for ( let i = 0; i < Math.max(jsondata.ask.length, jsondata.bid.length); ++i)
  {
  let newRow = tableApps.insertRow()
  newRow.insertCell().textContent = (i<jsondata.ask.length) ? jsondata.ask[i] : ''
  newRow.insertCell().textContent = (i<jsondata.bid.length) ? jsondata.bid[i] : ''
  }

table {
  border-collapse: collapse;
  }
td {
  border: 1px solid grey;
  padding: .3em .7em;
  }

<table id="apps"></table>

Collectives™ on Stack Overflow

Turn JSON into table pure javascript

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related