Jquery and ajax How to parse json?

Question

I'm using Jquery and ajax.

I have a simple form and my jquery :

This is a piece of the code :

username = $('input[name="username"]').val(); 
$.post("api.php", {username: username}, function(data) {  
    if(data == "error") {
        data("erreur");
    } else {
        alert(data);
        $('input[name="subscribers"]').attr("placeholder", "something").blur();
        $('input[name="viewCount"]').attr("placeholder", "something").blur();
    }
});

And the result of alert(data);

{"total":"628729","abo":"1646"}

I would like to put the result of total and the result of abo into my placeolder :

$('input[name="subscribers"]').attr("placeholder", ?abo?).blur();

But i don't know who to recover the result of the json and take the value of total and abo

note : my json is genrate by the file api.php with json_encode

Try to add a 4th parameter to the $.post call: $.post('api.php', {username: username}, function(data){}, 'json'), to tell jQuery to parse the JSON. Then data` will be an object (not a function). Then you can access data.total and data.abo. — gen_Eric
– gen_Eric, Commented Jan 16, 2014 at 16:19
Also, in case of an error, don't reply with "error". Reply with {error:true}, so that you can have jQuery parse it as JSON and check for data.error — gen_Eric
– gen_Eric, Commented Jan 16, 2014 at 16:23
@RocketHazmat if i use your solution with the parameter , 'json' it's works fine, but i can also use "JSON.parse(data); ", which one is better ? — mpgn
– mpgn, Commented Jan 16, 2014 at 16:25
@Martialp: I prefer not to have to manually call JSON.parse, but it's up to you. — gen_Eric
– gen_Eric, Commented Jan 16, 2014 at 16:27

Quentin · Accepted Answer · 2014-01-16 16:18:55Z

1

jQuery appears to be trying to handle your JSON as text (or, more likely, HTML).

Tell jQuery that it is JSON:

<?php header("Content-Type: application/json"); ?>

Then you can just:

foo = data.total

answered Jan 16, 2014 at 16:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Quentin Over a year ago

If there is an error, it should be handled with an HTTP status code and an error handler as well as a success handler. (But it doesn't stop that, you can do Content-Type: text/plain if you want to send back a plain text message body and then the comparison will work).

Pranav C Balan Over a year ago

it's something that he is echo in response,else case he response the json data

Sachin Jain · Accepted Answer · 2014-01-16 16:19:20Z

0

Try this:

if (data) {
    data = JSON.parse(data);
    $('input[name="subscribers"]').attr("placeholder", data.abo).blur();
}

answered Jan 16, 2014 at 16:19

Sachin Jain

21.9k34 gold badges113 silver badges177 bronze badges

1 Comment

Sachin Jain Over a year ago

@RocketHazmat You are right. If you can change your server side code, then you should handle it at server side and use data as it is. Agreed!

Pranav C Balan · Accepted Answer · 2014-01-16 16:19:46Z

0

You can use $.parseJSON() to parse json

username = $('input[name="username"]').val(); 
$.post("api.php", {username: username}, function(data) {  
    if(data == "error") {
        data("erreur");
    } else {
        alert(data);
        data=$.parseJSON(data); // add this line
        $('input[name="subscribers"]').attr("placeholder", "something").blur();
        $('input[name="viewCount"]').attr("placeholder", "something").blur();
    }
});

answered Jan 16, 2014 at 16:19

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Comments

Anthony Grist · Accepted Answer · 2014-01-16 16:19:55Z

0

JSON is a string representing (in this case) an object, so data is a string. In order to go from the string to the object you need to parse it. There's a JSON.parse() function to do that:

if(data == "error") {
    data("erreur");
} else {
    alert(data);
    var yourObj = JSON.parse(data);
    $('input[name="subscribers"]').attr("placeholder", yourObj.abo).blur();
    $('input[name="viewCount"]').attr("placeholder", yourObj.subscribers).blur();
}

answered Jan 16, 2014 at 16:19

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

3 Comments

gen_Eric Over a year ago

Why use JSON.parse, when you can tell jQuery to do it for you by setting Content-Type: application/json or passing 'json' as a 4th parameter to $.post?

Anthony Grist Over a year ago

@RocketHazmat Mostly because I'm lazy and the implicit parsing from jQuery would break the if(data == "error") test. You're correct, though, a better solution would be to have jQuery implicitly parse it and return a property in the object that indicates whether there was an error.

gen_Eric Over a year ago

I guess, though I'd suggest on an error responding with {error:true} so you could check for data.error.

Collectives™ on Stack Overflow

Jquery and ajax How to parse json?

4 Answers 4

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related