Why are these Object Properties undefined?

Question

I'm trying to access the properties of an object returned from my php script using json_encode like so:

php

echo json_encode(array(
  'person_id' => $personID,
  'job_id' => $jobID)
);

JS

$.ajax({
  url: url,
  cache: false,
  type: "POST"
}).done(function(sData){
  console.log(sData);
  console.log(sData.job_id);
  console.log(sData.person_id);
});

Output:

{"person_id":1,"job_id":1}
undefined
undefined

What's going on here? Why can't I access these properties?

UPDATE:

For any future visitors, this is a mistake I've made MANY, MANY times before (leaving out dataType ) and will most certainly make again.

It can be especially confusing because when you examine your server response in Chrome Dev Tools, it is automatically parsed as a JSON object (in the PREVIEW tab).

It's nice that Chrome does this, so that you can easily inspect your response data, however the same is not true for your javascript code, you WILL NEED to declare the proper dataType of the response so that your code can interpret the data as an object and not a string.

Answer 1

$.ajax doesn't evaluate the response as JSON by default. you have to pass dataType: 'json'

This should do it

$.ajax({
    url: url,
    cache: false,
    type: "POST",
    dataType: 'json'
}).done(function(sData){
        console.log(sData);
        console.log(sData.job_id);
        console.log(sData.person_id);
});

Answer 2

PHP returns a string value. This value has to be parsed into a javascript object. Try this:

 $.ajax({
   url: url,
   cache: false,
   type: "POST"
 }).done(function(sData){
   sData = JSON.parse(sData);
   console.log(sData);
   console.log(sData.job_id);
   console.log(sData.person_id);
});

JSON is not an object/associative array but a string representation of one. JSON allows you to send object across languages but it must be parsed from the string into the value in that language. In jQuery you can just set the dataType but the important note is that in any language you have to parse the JSON.

Answer 3

sData - string

use jQuery.parseJSON or jQuery.getJSON()