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.

Answer 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');
}

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

Answer 3

You try to change your json string on json string and not on json object (use JSON.parse to do that).

// You have a string and you want and object : 
var string = "[....]";
var object = JSON.parse(string);

// You have a object and you want and string: 
var object = {...};
var string = JSON.stringify(object);

Or better you can use the type attribut of jQuery ajax function, (put 'json' after your success function and jQuery give you avec object and not a Json string). If you have already do that, you already have an object, so you don't need to update your data

Answer 4

Use

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

Answer 5

jQuery(document).ready(function () { 
let table_responsive_data_html = "<table class='main-cart-table' id='tblOne'>";
        table_responsive_data_html += '</table>';
        alert(table_responsive_data_html);
});