Is there a good way to append JSON Data to divs only using JavaScript?

Question

I created a javaScript that calls JSON data, loops through the JSON data and appends it to various divs using class names. It works good so far but it seems like I'm doing it the long way. I'm using innerHTML qual[0].innerHTML += data[0].size; manually to display multiple JSON elements. In my JSON file, I know that there are 8 elements using the name "test" but the amount (test) could change. Is there a way to loop through the JSON elements and display them via class name instead of manually writing qual[0].innerHTML += data[0].size; qual[1].innerHTML += data[1].size;... ?

    fetch('test.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
    function appendData(data) {
        var mainContainer = document.getElementById("List");
        for (var i = 0; i < data.length; i++) {
            var qual = document.getElementsByClassName('Size')
            qual[0].innerHTML += data[0].size;
            qual[1].innerHTML += data[1].size;
            qual[2].innerHTML += data[2].size;
            qual[3].innerHTML += data[3].size;
            qual[4].innerHTML += data[4].size;
            qual[5].innerHTML += data[5].size;
            qual[6].innerHTML += data[6].size;
            qual[7].innerHTML += data[7].size;

            mainContainer.appendChild(div);
        }
    }

The HTML

        <h1>List</h1>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>

The JSON

  [
        {

           "test":"Test Data",
           "size":12
        },
        {
           "test":"Test Data",
           "size":5
        },
        {

           "test":"Pasta",
           "size":1
        },
        {

           "size":3
        },
        {

           "test":"Test Data",
           "size":8
        },
        {

           "test":"Test Data",
           "size":9
        },
        {

           "test":"Test Data",
           "size":9
        },
        {

           "test":"Test Data",
           "size":5
        }
     ]

I would like the dive to populate like the following:

   <div class="size"> 1 </div>
    <div class="size"> 2 </div>
    <div class="size"> 3 </div>
    <div class="size"> 4 </div>
    <div class="size"> 5 </div>
    <div class="size"> 6 </div>
    <div class="size"> 7 </div>

JayCodist · Accepted Answer · 2020-08-13 06:20:16Z

4

You're defeating the purpose of using a for loop. Make use of the index (i) variable to loop through the array returned by getElementsByClassName(). Like so:

    function appendData(data) {
        var mainContainer = document.getElementById("List");
        var qual = document.getElementsByClassName('Size');
        for (var j = 0; j < qual.length; j++) {
            qual[j].innerHTML += data[j].size;
        }
    ...
    }

edited Aug 13, 2020 at 6:20

answered Aug 13, 2020 at 5:05

JayCodist

2,5843 gold badges15 silver badges34 bronze badges

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

9 Comments

Spanky Over a year ago

Yes This is helpful but when I tried your example only the first div was populated with duplicate amounts in one div <div class="size">12 12 12 12 ..</div> I would like each value to populate each div

JayCodist Over a year ago

This div referenced here: mainContainer.appendChild(div);, where is it defined?

JayCodist Over a year ago

Also, I noticed a typo in my code. Have corrected it now

Spanky Over a year ago

Ahh, it's not defined

JayCodist Over a year ago

Seems I misunderstood what you were trying to achieve. I've made some changes to my solution. Give it a try

|

Gav Hern · Accepted Answer · 2020-08-13 20:33:17Z

2

We use a for...of loop for this. It loops through an array and returns the item it's currently on.

This code is going through the array and creating an element for each item within it.

function appendData(data) {
    var mainContainer = document.getElementById("List");
    for (const element of data) {
        mainContainer.innerHTML+="<div class=\"size\">"+element.size+"</div>"
    }
}

This will find an element with the id List and add the elements dynamically.

So you'll start with

<div id="List">

</div>

and end with

<div id="List">
    <div class="size">12</div>
    <div class="size">5</div>
    <div class="size">1</div>
    <div class="size">3</div>
    <div class="size">8</div>
    <div class="size">9</div>
    <div class="size">9</div>
    <div class="size">5</div>
</div>

edited Aug 13, 2020 at 20:33

answered Aug 13, 2020 at 5:42

Gav Hern

962 silver badges9 bronze badges

2 Comments

Spanky Over a year ago

I tried your example but it isn't working for me. Do you have a working example?

Gav Hern Over a year ago

@Spanky My appologies. I mistyped the variable name. instead of data.size it should be element.size. Heres a fiddle

Siva Kondapi Venkata · Accepted Answer · 2020-08-13 06:08:24Z

Here is snippet, using for-loop over elements

 var data = [
        {

           "test":"Test Data",
           "size":12
        },
        {
           "test":"Test Data",
           "size":5
        },
        {

           "test":"Pasta",
           "size":1
        },
        {

           "size":3
        },
        {

           "test":"Test Data",
           "size":8
        },
        {

           "test":"Test Data",
           "size":9
        },
        {

           "test":"Test Data",
           "size":9
        },
        {

           "test":"Test Data",
           "size":5
        }
     ]
const items = document.getElementsByClassName("size");
for (var i = 0; i < items.length; i++) {
  items[i].innerHTML += data[i].size
}

        <h1>List</h1>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>
        <div class="size"></div>

Collectives™ on Stack Overflow

Is there a good way to append JSON Data to divs only using JavaScript?

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related