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?

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

charlietfl
– charlietfl

2017-05-31 22:07:18 +00:00
Commented May 31, 2017 at 22:07 — charlietfl
– charlietfl, Commented May 31, 2017 at 22:07

quirimmo · Accepted Answer · 2017-05-31 22:10:11Z

7

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

edited May 31, 2017 at 22:10

answered May 31, 2017 at 21:55

quirimmo

10k3 gold badges33 silver badges45 bronze badges

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

Comments

VK321 · Accepted Answer · 2017-05-31 21:54:46Z

3

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

answered May 31, 2017 at 21:54

VK321

6,0135 gold badges48 silver badges53 bronze badges

Comments

Danziger · Accepted Answer · 2017-06-05 11:26:31Z

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>

dade.sliep · Accepted Answer · 2017-05-31 23:54:36Z

0

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

edited May 31, 2017 at 23:54

answered May 31, 2017 at 21:57

dade.sliep

1871 silver badge5 bronze badges

Comments

Artawood · Accepted Answer · 2020-06-15 18:35:09Z

0

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

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

answered Jun 15, 2020 at 18:35

Artawood

771 silver badge6 bronze badges

Collectives™ on Stack Overflow

Render each Objects in an array in HTML from JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related