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, Jan 16 '14 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, Jan 16 '14 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, Jan 16 '14 at 16:25
@Martialp: I prefer not to have to manually call `JSON.parse`, but it's up to you. — gen_Eric, Jan 16 '14 at 16:27
well, i use "$.post('api.php', {username: username}, function(data){}, 'json')", i think it's better like this :) — mpgn, Jan 16 '14 at 16:27
possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Felix Kling, Jan 16 '14 at 16:52

score 1 · Answer 1 · answered Jan 16 '14 at 16:18

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 '14 at 16:18

Quentin

914,110
126
1,211
1,335

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). – Quentin Jan 16 '14 at 16:30
it's something that he is echo in response,else case he response the json data – Pranav C Balan Jan 16 '14 at 16:31

score 0 · Answer 2 · answered Jan 16 '14 at 16:19

0

Try this:

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

answered Jan 16 '14 at 16:19

Sachin Jain

21,353
33
103
168

@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! – Sachin Jain Jan 16 '14 at 16:21

score 0 · Answer 3 · answered Jan 16 '14 at 16:19

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();
    }
});

score 0 · Answer 4 · answered Jan 16 '14 at 16:19

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 '14 at 16:19

Anthony Grist

38,173
8
62
76

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`? – gen_Eric Jan 16 '14 at 16:20
@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. – Anthony Grist Jan 16 '14 at 16:21
I guess, though I'd suggest on an error responding with `{error:true}` so you could check for `data.error`. – gen_Eric Jan 16 '14 at 16:22

Jquery and ajax How to parse json?

4 Answers4