How to access this data in Javascript?

Question

I have this encode in JSON format as returned data:

{
    "error": {
        "msg":"Concurrent verifications to the same number are not allowed",
        "code":10
    }
}

and I want to access msg so I wrote the javascript as:

$("#buttonPhoneSubmit").click(function(e) {
    $("#verifyForm").show();
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: './process.php',
        data: $('form').serialize(),
        datatype:'json', 
        success: function (data) {
             $('#error_message').html(data.error.msg);
        }
    });

but it said the data is undefined. Can someone tell me what's wrong with the code?

Thanks!

Then you need to check process.php for what it is returning and also check the network tab of your browser to know how the API is responding — Ankit Agarwal
– Ankit Agarwal, Commented Sep 4, 2018 at 6:53
@Roy - Or better yet, the server code should set the correct Content-Type. Using dataType is very much a second-best approach. — T.J. Crowder
– T.J. Crowder, Commented Sep 4, 2018 at 6:56
by default jQuery will parse JSON responses into javascript objects on ajax. Are you sure that your "process.php" is returning properly? Also rename datatype to dataType — MKougiouris
– MKougiouris, Commented Sep 4, 2018 at 6:56
@MKougiouris - Only if the response is correctly identified as JSON. — T.J. Crowder
– T.J. Crowder, Commented Sep 4, 2018 at 6:59

T.J. Crowder · Accepted Answer · 2018-09-04 06:58:43Z

2

As Roy said, you have datatype: 'json' instead of dataType: 'json'. So I suspect jQuery isn't parsing the JSON for you.

While you could change it to dataType: 'json' instead, the better approach is to update the PHP file to send the Content-Type: application/json header with the response:

// In the PHP, prior to sending the body of the response
header('Content-Type: application/json');

...and remove datatype: 'json' from your ajax call. jQuery will see the content type and parse it for you, at which point your code should work (assuming the page return returns the JSON you've quoted).

answered Sep 4, 2018 at 6:58

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Proson cheng Over a year ago

Yes as I just copied code from some tutorials, may be missing the <pre>header('Content-Type: application/json'); </pre> bit in the php file and after the changes, it works perfectly! Thanks for you guys help. :)

Collectives™ on Stack Overflow

How to access this data in Javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related