Parse json array in jquery in foreach loop

Question

I'm trying to parse json array with objects and use them to create multiple checkboxes. This is what I have:

JSON data:

[{
    "ID": 1,
    "Name": "Bacon",
    "Description": "",
    "Price": 0
}, {
    "ID": 2,
    "Name": "Beef",
    "Description": "",
    "Price": 0
}, {
    "ID": 3,
    "Name": "Chicken",
    "Description": "",
    "Price": 0
}, {
    "ID": 4,
    "Name": "Ham",
    "Description": "",
    "Price": 0
}]

In the JS code I have this:

success: function (data) {
    var objects = JSON.stringify(data);
    for (var key in objects) {
        var checkBox = "<input type='checkbox' data-price='" + key.Price + "' name='" + key.Name + "' value='" + key.ID + "'/>" + key.Name + "<br/>";
        $(checkBox).appendTo('#modifiersDiv');
    };
    $('#addModifiers').modal('show');
}

But the key object doesn't contain any data. My question is how I can do foreach loop and get the data I need and fetch that data in the checkbox properties.

Solution 1

Your data should already be a javascript array because you've specified the JSON type for the jQuery Ajax call so it should have already parsed the JSON into javascript. As such, you can just directly iterate it as the array:

success: function (data) {
    for (var i = 0; i < data.length; i++) {
        var checkBox = "<input type='checkbox' data-price='" + data[i].Price + "' name='" + data[i].Name + "' value='" + data[i].ID + "'/>" + data[i].Name + "<br/>";
        $(checkBox).appendTo('#modifiersDiv');
    }
    $('#addModifiers').modal('show');
}

Or, if you want to use jQuery's .each() iterator instead of a for loop, you can do this:

success: function (data) {
    $.each(data, function(key, item) {
        var checkBox = "<input type='checkbox' data-price='" + item.Price + "' name='" + item.Name + "' value='" + item.ID + "'/>" + item.Name + "<br/>";
        $(checkBox).appendTo('#modifiersDiv');
    });
    $('#addModifiers').modal('show');
}

Solution 2

You shouldn't be using var objects = JSON.stringify(data); since the data is already a JSON object.

Use JSON.stringify to create a string from a object

Use JSON.parse is to create an object from a string

Example:

var data = [{id: 1, name:'personsName'}, {id: 2, name:'personsName2'}]
var string = JSON.stringify(data)
var json = JSON.parse(string)

You can loop trough the data and append by using:

data.forEach(function(key, index){
   $("#modifiersDiv")
      .append($("<input></input>")
      .attr("type", "checkbox")
      .attr("data-price",key.Price )
      .attr("name",key.Name )
      .attr("value",key.ID)
      .text(key.Name); 
}

Comments

[jfriend00]

If you use jQuery's Ajax call properly, it will already have parsed the JSON.

[Laziale]

SyntaxError: JSON.parse: unexpected character I'm getting this error, let me see what I can do

[Arthur]

@jfriend00, only if he have set the type attribue on ajax function ;)

[bobthedeveloper]

Try without the JSON.parse, as @jsfriend00 mentioned, you should already have a JSON object.

[Laziale]

dataType: "json" I have that included

[Laziale]

how I can do the for each part to iterate through the items?

[Laziale]

how I can do the for each part to iterate through the items?

[Arthur]

If you have set the type attribute on jQuery ajax function, data is already an object, so juste don't call you JSON function and rename data params to objects.

[bobthedeveloper]

Updated for the iteration.