How do I add an array of objects into an HTML Table?

Question

I am gathering JSON string data on a button click. Each time I click the button another product gets added to the array. The array is an array of objects:

{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}

How would I take this information and insert it into a table? say I have

<div id='table'>
    <table>
    </table>
</div>

JavaScript:

var prodArr=[{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", 
product_name: "Tennis balls"}];

function buildTable(data){
    var table = document.getElementById('table');
    const arr = data;
    for(var obj of arr){
        var row = document.createElement('tr');
        for(var val of Object.values(obj)){
            var col = document.createElement('td');
            col.textContent = val;
            row.appendChild(col);
        }
        table.appendChild(row);
    }
}

buildTable(prodArr);

I would like to add headers for SKU:, retail_price:, list_price: product_name: and a textbox for quantity on each row as well.

What have you tried? We expect that you'll do your research and make an attempt before posting. Also, nesting the table within a div is redundant. Just give the table the id and lose the div. — Scott Marcus
– Scott Marcus, Commented Dec 29, 2020 at 21:18
Do you happen to know about Document.createElement() method? What about Node.textContent property? Any ideas? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Dec 29, 2020 at 21:18
codepen.io/Postman507/pen/MWjQpKR - This is what I have so far, I would like to add headers for SKU: product_name: list_price: retail_price: quantity: but quantity is not listed here so i'd like a textbox inserted in place. I have also updated my original code to match this codepen. — John Taylor
– John Taylor, Commented Dec 30, 2020 at 18:15

Unmitigated · Accepted Answer · 2020-12-29 21:29:23Z

1

You can loop over the array, use Object.values to loop over the values of the object, and use document.createElement to create new table rows to add to the table.

const table = document.getElementById('table');
const arr = [{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}];
for(const obj of arr){
  const row = document.createElement('tr');
  for(const val of Object.values(obj)){
    const col = document.createElement('td');
    col.textContent = val;
    row.appendChild(col);
  }
  table.appendChild(row);
}

table, tr, td, th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}

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

answered Dec 29, 2020 at 21:29

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Marcus Over a year ago

We tend not to provide answers to poor questions that don't belong here in the first place as it just attracts more poor questions.

Collectives™ on Stack Overflow

How do I add an array of objects into an HTML Table?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related