undefined result from jquery post

Question

I am relatively new to ajax and have looked through tons of other threads but can't find the answer.

I am trying to read the result from a .post call but am unsuccessful.

Here is the code:

$.post( http://www.mapquest.com/directions/v1/routematrix?key=...,//I have my actual key where the three dots are
    {locations:[{latLng:{lat:54.0484068,lng:-2.7990345}},{latLng:{lat:53.9593817,lng:-1.0814175}},{latLng:{lat:53.9593817,lng:-1.0514175}},{latLng:{lat:53.9593817,lng:-1.0114175}}]},
    function (data, status, xhr) {
        console.log(typeof(data)); //this shows: object
        console.log(data); //this shows: [object object]
        console.log(data[0]); //this shows: undefined
        console.log(data.length); //this shows: undefined
        console.log(status); //this shows: success          
    }, 
    'json'
);

I was expecting output that looks like this:

{
   allToAll: false,
   distance: [
      0,
      25.685,
      107.846,
      78.452
   ],
   time: [
      0,
      2260,
      7253,
      5930
   ],
   locations: [
      "Lancaster, England",
      "Liverpool, England",
      "Chester, England",
      "Stoke-on-Trent, England"
   ],
   info: {
      ...
   }
}

Any idea what I'm doing wrong?

`data` seems to be an object which has the properties `allToAll`, `distance`, `time` , `locations` and `info`, but **not** `0` or `length`. — Felix Kling, Jul 07 '13 at 21:40
possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Felix Kling, Jul 07 '13 at 21:40
@Stunner, I put the output in comments in the code above next to the console.log — GR4, Jul 08 '13 at 18:36
@Felix, thanks for your comment. Although it was helpful, it turns out that I had a different problem alltogether. — GR4, Jul 08 '13 at 20:15

score 0 · Answer 1 · edited Jul 07 '13 at 21:53

0

Your problem is in tha way you're attempting to log the data. You already have a javascript object in data, so you can access the properties directly:

console.log(typeof(data)); // object - correct
console.log(data);         // [object object]  - correct
console.log(data[0]);      // undefined - correct; this is not an array
console.log(data.length);  // undefined - correct; not an array, so no length
console.log(status);       // success

Try logging the properties directly. For example:

console.log(data.locations[0]); // Should be 'Lancaster, England'
console.log(data.distance[1];   // should be 25.685
console.log(data.time[3]);      // should be 5930

edited Jul 07 '13 at 21:53

Colonel Panic

1,604
2
20
31

answered Jul 07 '13 at 21:39

What I get from logging those is: Uncaught TypeError: Cannot read property '0' of undefined – GR4 Jul 07 '13 at 21:44
Ok - another thought: in your Query call change `'json'` to `dataType:'json'`. Also, get a decent debugging tool: Firefox+Firebug or Chrome + Developer Tools. Then you'll be able to check the data coming from your server is what you expect it to be before it's processed by jQuery and Javascript, and check the data in your function matches that. – Jul 07 '13 at 22:01
Thanks @Mike. Your first suggestion doesn't work, doesn't seem correct syntax. Your suggestion to use firebug is great though, I'm getting a more detailed error log. It turns out the server response from mapquest can't parse my JSON: Error parsing JSON from Request: A JSONObject text must begin with '{' at character 0". I have checked though, my JSON syntax seems correct according to: http://jsonlint.com/ and I have sent the exact data that mapquest requests so I'm still not sure where I'm going wrong... – GR4 Jul 08 '13 at 18:37

score 0 · Accepted Answer · answered Jul 08 '13 at 20:13

In case anybody is interested, I circumvented the problem by using a get method (instead of post) and adding the JSON in the URL as such:

var matrixUrl3 = 'http://www.mapquestapi.com/directions/v1/routematrix?key=YOUR_KEY_HERE&json={locations:[{latLng:{lat:54.0484068,lng:-2.7990345}},{latLng:{lat:53.9593817,lng:-1.0814175}},{latLng:{lat:53.9593817,lng:-1.0514175}},{latLng:{lat:53.9593817,lng:-1.0114175}}]}';

$.get(newURL,function(data, status, xhr) {                         
            //console here
        }, 'json');

Not sure why the post method didn't work, tried stringifying my JSON as explained here: http://www.json.org/js.html but didn't help either. Anyway, circumventing the problem as above works like a charm!

undefined result from jquery post

2 Answers2