Jquery .each Method Returning Last Value

I feel like the .each() method isn't really working. Here is my code: function makeHTML(data) { console.info(data.categories); $(data).each(function () { let createButton = `

Solution 1:

The problem is that you are using incorrect JSON format. You duplicate the keys and the names should be unique. This should work

{"categories":[{"title":"Something","id":1},{"title":"Something Else","id":2}]}

Other thing is that you are trying to append div elements on a table, the table must contains rows and columns. So if I understand your question this is the way your how to append your JSON elements to the table: HTML:

<table id='table'>

</table>

script variables:

var categoriesJson = [  
          {  
             "title":"Something",
             "id":0
          },
          {  
             "title":"Something Else",
             "id":1
          }
       ]
 var result = '';

script code:

 $(document).ready(function(){

            $.each(categoriesJson, function (i, item) {
                    result += "<tr><td><button id='"+item.id+"'>" + item.title + "</button></tr></td>"

                $('#table').append(result);
            });


       });

Solution 2:

If you change it to :

{"categories":{"category1":{"title":"Something","id":1},"category2":{"title":"Something Else","id":2}}}

Your code will recognize both objects, so you cannot stack them like that. JSON overwrites its attributes and sees only one version. You need to change it to an array.

Log from firebug :

Object { category1={...}, category2={...}}

You should change function to :

functionmakeHTML(data) {
console.info(data.categories);

$(data.categories).each(function (index, data2) {
    var createButton = `
                <div class="col-md-6">
                    <button type="button" class="btn btn-default">
                        <a href="${data2.id}" 
                        target="_blank">${data2.title}</a>
                    </button>
                </div>
                `;
    document.getElementById('table').innerHTML += createButton;//add not set
});
}

$(document).ready(function () {
$.ajax({
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: "json/data.json",
    dataType: "json",
    success: makeHTML,
    error: function (result) {
        console.error(result);
    }
});
});

And data to

{"categories":[{"title":"Something","id":1},{"title":"Something Else","id":2}]}

Solution 3:

I guess you should change the line to something like this:

$(data.categories).each(function (key, value) {
    console.log("title", value.title);
});

Solution 4:

you put the document.getElementById('table').innerHTML = createButton; in the each loop, in this way you write n times in the table and every time you put only the last "createButton" I suggest you to init your variable before your each() loop, then concat every response from each iteration and only at the end push your data into the innerHTML.