Как итерацию JSON данные в JQuery + AJAX

Question

Но я получаю respnce в JSON, то есть предупреждение (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 
     } 
    } 

Я пробовал много другой синтаксис, но не могу показаться, чтобы выяснить это. Может ли кто-нибудь указать мне в правильном направлении ?, так что я могу решить эту проблему.

Answer 1

Как только у вас есть строка json, используйте parseJSON() function, который возвращает объект. Затем вы можете получить доступ к его свойствам, как показано в документах.

Также вы можете найти на сайте:

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

Answer 2

Вы можете использовать $.each итерировать объект JavaScript

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>

Answer 3

Что-то вроде этого!

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

Предположим, вы следующие 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 
    } 
}); 

Answer 4

Вы должны смотреть при загрузке JSON с использованием запроса HTTP GET (вы также можете использовать POST).

JSON JQuery Синтаксис: эталонная here

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

код.