How to iterate json data in jquery + ajax

Question

But i get respnce in json, i.e alert(html)

<script>
function addcartAction(id){
var dataString='id='+id;

    $.ajax({
    type: "POST",
    url:"<?php echo Yii::app()->request->baseUrl; ?>/testurl",
    data: dataString,
    success: function(html)
    { 

    alert(html);

        $("#cart-item").html(html);
    }
    });

}

</script>



{
        "1": {
            "ItemName": "Product1",
            "id": "1",
            "item_Image": "http://testurl.com/gallerythumb/test.JPG",
            "price": "4.99",
            "quantity": 1
        },
        "2": {
            "ItemName": "Product2",
            "id": "2",
            "item_Image": "http://testurl.com/gallerythumb/test1.jpg",
            "price": "7.99",
            "quantity": 12
        }
    }

I have tried alot of different syntax but can't seem to figure this out. Can any one point me in the right direction?, so can i solve this one.

Read this: http://www.w3schools.com/js/js_loop_for.asp – Rayon Aug 03 '15 at 07:06 — Rayon, Aug 03 '15 at 07:06
Documentation link http://api.jquery.com/jquery.parsejson/ – byJeevan Aug 03 '15 at 07:13 — byJeevan, Aug 03 '15 at 07:13

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

Once you have your json string, use the parseJSON() function, which returns an object. Then you can access it's properties as shown in the docs.

Also you might refer to:

edited May 23 '17 at 12:15

Community

1
1

answered Aug 03 '15 at 07:10

ANVerona

439
3
10

Pranav C Balan · Answer 2 · 2015-08-03T07:18:59.420

0

You can use $.each to iterate JavaScript object

var data = {
  "1": {
    "ItemName": "Product1",
    "id": "1",
    "item_Image": "http://testurl.com/gallerythumb/test.JPG",
    "price": "4.99",
    "quantity": 1
  },
  "2": {
    "ItemName": "Product2",
    "id": "2",
    "item_Image": "http://testurl.com/gallerythumb/test1.jpg",
    "price": "7.99",
    "quantity": 12
  }
};

$.each(data,function(i, v) {
  console.log(i);
  $.each(v,function( ind , val) {
    console.log( ind , val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Aug 03 '15 at 07:18

answered Aug 03 '15 at 07:10

Pranav C Balan

113,687
23
165
188

how do i get these data responce in ajax success – sairam Aug 03 '15 at 08:04
success: function(data){ $.each(data,function(key,value){ alert(key); }); } – sairam Aug 03 '15 at 08:05
either you need to set `dataType:'json'` on you need to the data using `JSON.parse(data)` – Pranav C Balan Aug 03 '15 at 08:21

Guruprasad J Rao · Answer 3 · 2015-08-03T08:07:14.353

0

Something like this!

var data={
    "1": {
        "ItemName": "Product1",
        "id": "1",
        "item_Image": "http://testurl.com/gallerythumb/test.JPG",
        "price": "4.99",
        "quantity": 1
    },
    "2": {
        "ItemName": "Product2",
        "id": "2",
        "item_Image": "http://testurl.com/gallerythumb/test1.jpg",
        "price": "7.99",
        "quantity": 12
    }
};
$.each(data,function(key,value){
    var element='<div class="elem">Item No : '+key+
                ' <span>Item Name : '+value.ItemName+'</span> '+
                ' <span>Id : '+value.id+'</span> '+
                ' <img src="'+value.item_Image+'"/> '+
                ' <span>Price: '+value.price+'</span> '+
                ' <span>Quantity : '+value.quantity+'</span></div> ';
    $('body').append(element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Update

Say you have following ajax

$.ajax({
   url:'someurl',
   type:'POST',
   dataType:'json',
   success: function(data)
   { 
       $.each(data,function(key,value){
           var element='<div class="elem">Item No : '+key+
                       ' <span>Item Name : '+value.ItemName+'</span> '+
                       ' <span>Id : '+value.id+'</span> '+
                       ' <img src="'+value.item_Image+'"/> '+
                       ' <span>Price: '+value.price+'</span> '+
                       ' <span>Quantity : '+value.quantity+'</span></div> ';
             $('body').append(element); //append it to anywhere in DOM using selector
      });
    },
    error:function(jqXHR,responseData,status){
        //do something
    }
});

edited Aug 03 '15 at 08:07

answered Aug 03 '15 at 07:14

Guruprasad J Rao

29,410
14
101
200

how do i get these data responce in ajax success – sairam Aug 03 '15 at 08:00
success: function(data){ $.each(data,function(key,value){ alert(key); }); } – sairam Aug 03 '15 at 08:00
@SairamGogikar Updated answer.. check and let me know!! – Guruprasad J Rao Aug 03 '15 at 08:07
i passed the values as var dataString='id='+id; – sairam Aug 03 '15 at 08:24
where you've passed the values!! What changes you want to implement here?? – Guruprasad J Rao Aug 03 '15 at 08:26
Updated my question, can u check once. – sairam Aug 03 '15 at 09:29
Are you getting relevant data back?? as you have shown in question? – Guruprasad J Rao Aug 03 '15 at 09:30
iam getting the json data – sairam Aug 03 '15 at 09:31
then change your `ajax success` to what I've shown here!! – Guruprasad J Rao Aug 03 '15 at 09:31
instead of `$('body').append(element);` write `$('#cart-item').append(element);` – Guruprasad J Rao Aug 03 '15 at 09:33
its not working, iam getting json responce, but i dont know its not working? – sairam Aug 03 '15 at 09:42
place a `debugger;` inside `success`. Press `F12` while running in browser!! Just try debugging line by line using `F10` – Guruprasad J Rao Aug 03 '15 at 09:48
iam getting these error, Type error: invalid 'in' operand a – sairam Aug 03 '15 at 10:03
then its not in proper format as you have mentioned! do one thing try assigning your response data to some variable and loop the variable inside success! – Guruprasad J Rao Aug 03 '15 at 10:04
iam trying to assigning responce data to some variable, and also its not coming. – sairam Aug 03 '15 at 10:20
do this - > `var result = $.parseJson(data)` and then replace all `data` inside `each` with `result` – Guruprasad J Rao Aug 03 '15 at 10:22
what version of jQuery you are using? – Guruprasad J Rao Aug 03 '15 at 11:09

score 0 · Answer 4 · answered Aug 03 '15 at 07:21

You need to look at loading JSON data using an HTTP GET request (you can also use POST).

JSON jQuery Syntax:

jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] );

url – A string containing the URL to which the request is sent.

data – A map or string that is sent to the server with the request.

success(data, textStatus, jqXHR) – A callback function that is executed if the request succeeds.

Download Example

Code reference here.

How to iterate json data in jquery + ajax

4 Answers4