如何在jquery + ajax中迭代json数据

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.

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:

1. Converting JSON Object into Javascript array
2. Convert JSON string to Javascript array

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>

</div>

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

</div>

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.