jQuery Iterate through JSON Error

Question

i have JSON data as follows

{"4":"Bangles","2":"Rings"}

I am trying to Iterate through the content to populate the Dropdown

$("#ProductProductTypeId").change(function(){
           var product_type_id = $(this).val();
           console.log(product_type_id);

           $.ajax({
              type: "get",
              url: "/alankruti/admin/product_categories/get_category/"+product_type_id,
              //data: country_id,
              success:function(data){
                console.log(data);
                var options = '';
                $.each(data, function (key,value) {
                    console.log(key);
                    console.log(value);
                     options += '<option value="'+key+'">'+value+'</option>';
                     console.log(key + " " +value)
                });
              }
           });

     });

Error:

enter image description here

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

First create a jSON Object from your data string using jQuery.parseJSON. Then you can iterate with $.each.

Sample

success:function(data){
    // create json object from data (string)
    jsonObj = jQuery.parseJSON( data);
    console.log(data);
    var options = '';
    // iterate through json
    $.each(jsonObj , function (key,value) {
            console.log(key);
            console.log(value);
            options += '<option value="'+key+'">'+value+'</option>';
            console.log(key + " " +value)
    });
}

JSFiddle Demo

References

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 6, 2014 at 5:19

dknaack

60.7k28 gold badges166 silver badges211 bronze badges

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

2 Comments

Harsha M V Over a year ago

ahh. i m not doing JSONParse :(

dknaack Over a year ago

No problem. I just wanted to know if you need further help. Have a nice day!

Darren · Accepted Answer · 2014-08-06 05:18:24Z

1

Taking your json:

{"4":"Bangles","2":"Rings"}

A simple each() loop like this works:

$.each(items, function(k, values) {
    console.log(k);
    console.log(values);
});

JSFiddle Demo

Simply meaning all you had to do is

var options;
$.each(items, function(k, values) {
    options += "<option value='" + k + "'>" + values + "</option>";
});
// then append options to select...

answered Aug 6, 2014 at 5:18

Darren

13.1k4 gold badges44 silver badges81 bronze badges

Comments

Gdroid · Accepted Answer · 2014-08-06 07:15:29Z

0

Agree with answer by dknaack. Alternatively, try setting dataType: "json" in ajax. This ensures that in successHandler, the data object is a json object.

$.ajax({
type: "get",
dataType : "json",
...

answered Aug 6, 2014 at 7:15

Gdroid

968 bronze badges

Collectives™ on Stack Overflow

jQuery Iterate through JSON Error

3 Answers 3

Sample

JSFiddle Demo

References

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Sample

References

2 Comments

Comments

Comments

Related