Render each Objects in an array in HTML from JavaScript

Question

I have a JavaScript array of objects taken from a JSON file. Each object in the array represents a product. The following code shows the JavaScript. The console.log displays each element in the console, however the innerHTML only renders the last as this is the last value to be rendered.

/* global $ */
var output = document.getElementById('output');
var products = [];
$.getJSON('/products', function(data){
 output.innerHTML = data
 for(var keys in data){
 console.log(data[keys]);
 products.push(data[keys]);
 output.innerHTML = data[keys].NAME;
 }
 // output.innerHTML = products;
 //console.log(products)
});

I want each product to be rendered in it's own output div. How would I display each element in the HTML instead of just the last?

• charlietfl: note it is generally bad practice to use for in on arrays

Answer 1

Just append the element to your output. Actually you did it.

Change this:

output.innerHTML = data[keys].NAME;

To this:

$('#output').append(`<div>${data[keys].NAME}</div>`);

So:

for(var keys in data){
 console.log(data[keys]);
 products.push(data[keys]);
 $('#output').append(`<div>${data[keys].NAME}</div>`);
 }

I would recommend you also to change the for...in with a simple forEach, so to change the loop into this:

data.forEach((el) => {
 products.push(el);
 $('#output').append(`<div>${el.NAME}</div>`);
});

The error in your code was just that you were overriding the HTML content of your element every time. If you change:

output.innerHTML = data[keys].NAME;

to this:

output.innerHTML += data[keys].NAME;

It should already work

Answer 2

You can use jQuery "append". You dont need to make product object.

Try like this:

for(var keys in data){
 $(".productList").append( "<div>"+data[keys].NAME+"</div>" );
}

Answer 3

Basically, your output element should be a wrapper containing other elements repeated for each product. One semantic option is to use a list, such as ul + li.

You should iterate your products and append its piece of HTML to an array. When you are done processing them, you assign that chunk of HTML to the output element.

// Just to keep your code untouched:
const $ = {
 getJSON(url, callback) {
 callback([{
 ID: 1,
 NAME: 'Product 1',
 PRICE: '2.50',
 }, {
 ID: 2,
 NAME: 'Product 2',
 PRICE: '1.25',
 }, {
 ID: 3,
 NAME: 'Product 3',
 PRICE: '10.00',
 }]);
 },
};
const output = document.getElementById('output');
let productsArray = [];
$.getJSON('/products', function(products){
 productsArray = products;
 output.innerHTML = products.map(product => { 
 return `<li data-id="${ product.ID }">
 <span>${ product.NAME }</span>
 <span>${ product.PRICE }</span>
 </li>`;
 }).join('');
});

<ul id="output"></ul>

Answer 4

$('#output').append(`<div>${data[keys].NAME}</div>`);

Answer 5

In reference to @VK321, you can also use the .map method.

data.map(element => {
 $(".productList").append( `<div>${element.NAME}</div>` );
})