How to get JSON data on ajax call

ajax, jquery, json

Solution

To get first `product_id`

pid = data[0].product_id
alert(pid);

Fiddle Demo

To get each `product_id` from response

complete: function(data) {
    $.each(data,function(){
        alert(this.product_id);
    });
}

Fiddle Demo

Problem

i am trying to get the `JSON` data from php page on ajax call.The php page is returning the `AJAX`string, now i have to get that `JSON` data and display values separately. How can i do this??? here is code i am using.... When i run this code to get the data product_id, it is showing alert undefined. code: ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Request json test</title> <script type="text/javascript" src="js/jquery.js"></script> <script language="JavaScript"> $(document).ready(function(){ $("#testjson").click(function(e){ startJsonSession(); return false; }); function startJsonSession(){ $.ajax({ url: "index.php", cache: false, dataType: "json", complete: function(data) { pid = data.product_id; alert(pid); } }); } }); </script> </head> <body> <a href="#" id="testjson">Get JSON Data</a> <div id="showdata"></div> </body> </html> ``` JSON output from index.php: ``` [{"ID":"1","product_id":"3","image_name":"cycle5.png","image_type":".jpg"},{"ID":"2","product_id":"6","image_name":"cycle3.png","image_type":".jpg"},{"ID":"3","product_id":"4","image_name":"cycle2.png","image_type":".jpg"},{"ID":"4","product_id":"43","image_name":"cycle1.png","image_type":".jpg"},{"ID":"5","product_id":"7","image_name":"cycle8.png","image_type":".jpg"},{"ID":"6","product_id":"9","image_name":"cycle0.png","image_type":".jpg"},{"ID":"7","product_id":"543","image_name":"cycle6.png","image_type":".jpg"},{"ID":"8","product_id":"445","image_name":"cycle9.png","image_type":".jpg"},{"ID":"9","product_id":"453","image_name":"cycle75.png","image_type":".jpg"},{"ID":"10","product_id":"725","image_name":"cycle86.png","image_type":".jpg"}] ```

Original source