parse json using ajax success function

Question

I'm trying to display the json that i get and parse it in the success function of ajax.

What I have so far:

Ajax:

data = "Title=" + $("#Title").val() + "&geography=" + $("#geography").val();
alert(data);


url= "/portal/getResults.php";

$.ajax({
        url: url,

        type: "POST",
        //pass the data
        data: data,
        dataType: 'json',

        cache: false,
        //success
        success: function(data) {

                alert(data);

        }
    });

getResults.php (JSON output):

{

"results": [
{
    "DocId": 2204,
    "Title": "Lorem ipsum dolor sit amet, consectetur",
    "Locations": [
        {
            "State": "New York",
            "City": ""
        },
        {
            "State": "New York",
            "City": "New York City"
        }
    ],
    "Topics": [
        3,
        7,
        11
    ],
    "PublicationYear": "2011",
    "Organization": "New  Yorks Times",
    "WebLocation": "www.google.com",
    "Description": "Lorem Ipsum"
}
],
"TotalMatches": 1

}

I expect the result in data to be the the json from getResults.php but instead I get [object Object].

I have also tried the code below but get no response:

success: function(data) {
                var json1 = JSON.parse(data);
                alert(json1);
        }

you receive an object. when displaying that using alert() it will get converted to a string, which by default is [object Object]. Try console.log() instead to see the actual object. — Sirko
– Sirko, Commented Aug 30, 2016 at 16:31
jQuery already deserialises the data for you, you don't need to use JSON.parse. The reason you see [object Object] is because you used alert() to view it - this coerces all types to string. Use console.log instead — Rory McCrossan
– Rory McCrossan, Commented Aug 30, 2016 at 16:32

derelict · Accepted Answer · 2016-08-30 16:34:10Z

2

since you're telling jQuery that you want dataType:'json', the ajax function parses the JSON response into an object for you. the result object you see should be an object with data matching the JSON response from your server. if you need the string version, try JSON.stringify(), otherwise you can just use the object as is: data['results'][0]['DocId'], etc

good luck!

answered Aug 30, 2016 at 16:34

derelict

2,08012 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peacefull · Accepted Answer · 2016-08-30 16:40:57Z

Here is an example for your request : http://jsfiddle.net/5y5ea98n/

var echo = function(dataPass) {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: dataPass,
        cache: false,
        success: function(json) {
            alert(JSON.stringify(json));
        }
    });
};

$('.list').live('click', function() {
    $.get("http://www.json-generator.com/api/json/get/bQxORzxQGG?indent=2", function(data) {
        var json = {
            json: JSON.stringify(data),
            delay: 1
        };
        echo(json);
    });
});

Jay Trivedi · Accepted Answer · 2017-04-28 04:50:47Z

I tried some code relate to this and it worked successfully.

function ajaxToParseJson(){
AUI().use('aui-io-request', function(A){
    A.io.request('${jsonAjaxURL}', {
           dataType:'json',
           method: 'post',
           data: {
               execute: 'JsonLogic',
               numberVal:'Pass Json String Here if needed from Screen'
           },
           on: {
                   success: function() 
                   {
                       var empName = this.get('responseData').name;
                       var id = this.get('responseData').id;
                       console.log("Name: "+empName);
                       console.log("Id: "+id);
                     /** Since return type of this function is bydefault Json it will return Json still if you want to check string below is the way**/
                    var data = JSON.stringify(this.get('responseData'));
                    alert(data);
                   }
               }
        });

});

}

I have an Employee Class with two fields id,name.

Collectives™ on Stack Overflow

parse json using ajax success function

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related