Convert data from a PHP API to JSON object after ajax call

Question

I have an api that returns the data in the following format after I call it using jQuery ajax:

API Call

$.get("displayapi.php",function(data){
        var json=data;
        console.log(json);});

Log in console

{
"listing": {
    "id": "7",
    "name": "Nina Randy",
    "product": "Studio Apartment for Rent ",
    "email": "n@gwmail.gwu.edu",
    "phone": "2147483647",
    "des": "Apartment near Foggy Bottom metro station for rent. Available from     May 2016. Please contact for more details",
    "cost": "3000",
    "category": "apartments",
    "date": "2016-04-24",
    "pic": "unnamed.jpg"
}
}{
"listing": {
    "id": "6",
    "name": "Jay Sean",
    "product": "Parking Spot near Gelman Library",
    "email": "jsean@gwmail.gwu.edu",
    "phone": "2147483647",
    "des": "Parking spot located near foggy bottom metro station for sharing. Please contact for availability. ",
    "cost": "1000",
    "category": "parking",
    "date": "2016-04-18",
    "pic": "1002240-13-20160117082202.jpeg"
} 
}

It displays the content in an Object format but is not really an Object. How can I convert it to JSON object so that I can access individual properties of the object.

Answer 1

You COULD just call the JSON.parse() on the string returned by php like so:

$.get("displayapi.php",function(data){
        var dataObject = JSON.parse(data);
});

But since your return value is not a valid JSON - and you really can't make it one - try the following approach:

$.get("displayapi.php",function(data){
        var dataObject = eval(data);
});

Answer 2

You should parse your response data to javascript json object like below;

$.get("displayapi.php",function(data){
    var json=data;
    var obj = JSON.parse(data);
    //iterate lsiting....
    $.each(obj.listing, function(i){
        console.log(obj.listing[i].name);
    })
});

Answer 3

jQuery has a native function called $.parseJSON() that will convert the JSON string to an object.

http://api.jquery.com/jquery.parsejson/

Example

$.get("displayapi.php",function(data){
    var json=data;
    console.log(json);
    var JSONdata = $.parseJSON(json);
    console.log(JSONdata.listing.id);
});

Answer 4

If you check the response header on console, you can see Content-Type set as "text/html;" that is why you are getting problem in parsing response.

First, use $.getJSON instead of $.get

Can you set proper Content type in your displayapi.php as well. Eg:

<?php
 $data_array = array(); // The array you want to serialize
 header('Content-Type: application/json');
 echo json_encode($data_array);
?>

This way you can avoid parsing the response again using javascript. Now you can check the console again and can see that Content-Type set as "application/json"

Please test and let me know if this is working.

Answer 5

I am suggesting yo use $.getJSON() method for get JSON data.. jquery take care about parsing JSON data with this method

$.getJSON("displayapi.php",function(json){
    $.each(json.listing, function(i){
        console.log(obj.listing[i].name);
    })
});

refer $.getJSON() method