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.

Why would you stringify before looping? If anything, you want to parse — tymeJV
– tymeJV, Commented Apr 14, 2014 at 19:45
Your data is an array. You should just iterate the array and then refer to data[i].ID, data[i].Name, etc... Also, why are you calling JSON.stringify()? You want it to be a javascript array, not a string. — jfriend00
– jfriend00, Commented Apr 14, 2014 at 19:45
You need to know what data is in the success handler. If you use jQuery's ajax call properly, it should already be a javascript array and you can just directly iterate it as an array. Step 1, do a console.log(data) to see exactly what it is. — jfriend00
– jfriend00, Commented Apr 14, 2014 at 19:48

jfriend00 · Accepted Answer · 2014-04-14 19:59:22Z

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

bobthedeveloper · Accepted Answer · 2014-04-14 20:04:52Z

6

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

edited Apr 14, 2014 at 20:04

answered Apr 14, 2014 at 19:45

bobthedeveloper

3,7832 gold badges17 silver badges31 bronze badges

7 Comments

jfriend00 Over a year ago

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

Laziale Over a year ago

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

Arthur Over a year ago

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

bobthedeveloper Over a year ago

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

Laziale Over a year ago

dataType: "json" I have that included

|

Arthur · Accepted Answer · 2014-04-14 19:47:36Z

0

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

answered Apr 14, 2014 at 19:47

Arthur

5,1783 gold badges37 silver badges65 bronze badges

2 Comments

Laziale Over a year ago

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

Arthur Over a year ago

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.

Vishal Khode · Accepted Answer · 2014-04-14 19:56:27Z

0

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

answered Apr 14, 2014 at 19:56

Vishal Khode

8412 gold badges9 silver badges15 bronze badges

Comments

Maulik patel · Accepted Answer · 2021-08-10 05:14:39Z

0

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

answered Aug 10, 2021 at 5:14

Maulik patel

2,4502 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

Parse json array in jquery in foreach loop

5 Answers 5

Comments

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related