Unable to access JSON response from AJAX API call

Question

I am unable to access and append the response from a AJAX call to the factual API.

I am receiving undefined errors however I try and structure the code accessing and iterating over the response.

I have managed to successfully log the data to console, now just need to add to the HTML on a page.

Below is the current code and API response structure, what I do not understand is when to use data and what exactly this relates to? Is this a keyword for any data received from a request or specific to certain API structures.

CODE:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <script type="text/javascript">
  $( document ).ready(function() {
    console.log('dom ready');
    $("#search").on("click", runTing);

    function runTing () {
      var url = "http://api.v3.factual.com/t/places?q=Aldi,London&filters={%22country%22:%22GB%22}&KEY=111111111111111111111111";

      $.ajax({
        url: url,
        dataType: "JSON",
        success: function (data) {
         var $latitude = $("<p>").text(response.data[0].address);
         $('#info').append("$latitude");
       }
     });

    };        
  });
  </script>
</head>
<body>
  <div id="info"></div>
</body>

JSON Response:

{  
   "version":3,
   "status":"ok",
   "response":{  
      "data":[  
         {  
            "address":"632-640 Kingsbury Rd",
            "admin_region":"England",
            "category_ids":[  
               171
            ],
            "category_labels":[  
               [  
                  "Retail",
                  "Supermarkets and Groceries"
               ]
            ],
            "country":"gb",
            "factual_id":"75fda75e-41a7-4645-b47a-9af5364fead1",
            "hours":{  
               "monday":[  
                  [  
                     "8:00",
                     "21:00"
                  ]
               ],
               "tuesday":[  
                  [  
                     "8:00",
                     "21:00"
                  ]
               ],
               "wednesday":[  
                  [  
                     "8:00",
                     "21:00"
                  ]
               ],
               "thursday":[  
                  [  
                     "8:00",
                     "21:00"
                  ]
               ],
               "friday":[  
                  [  
                     "8:00",
                     "21:00"
                  ]
               ],
               "saturday":[  
                  [  
                     "8:00",
                     "21:00"
                  ]
               ],
               "sunday":[  
                  [  
                     "10:00",
                     "16:00"
                  ]
               ]
            },
            "hours_display":"Mon-Sat 8:00 AM-9:00 PM; Sun 10:00 AM-4:00 PM",
            "latitude":51.584985,
            "locality":"London",
            "longitude":-0.279941,
            "name":"Aldi",
            "neighborhood":[  
               "Kingsbury",
               "Queensbury"
            ],
            "post_town":"London",
            "postcode":"NW9 9HN",
            "region":"Greater London",
            "tel":"0844 406 8800",
            "website":"http://www.aldi.co.uk/"
         },
         {  
            "address":"1-4 London Rd",
            "admin_region":"England",
            "category_ids":[  
               171
            ],
            "category_labels":[  
               [  
                  "Retail",
                  "Supermarkets and Groceries"
               ]
            ],
            "country":"gb",
            "factual_id":"7edfabf8-3f28-4ee4-9322-6a296ed09a59",
            "hours":{  
               "monday":[  
                  [  
                     "8:00",
                     "20:00"
                  ]
               ],
               "tuesday":[  
                  [  
                     "8:00",
                     "20:00"
                  ]
               ],
               "wednesday":[  
                  [  
                     "8:00",
                     "20:00"
                  ]
               ],
               "thursday":[  
                  [  
                     "8:00",
                     "20:00"
                  ]
               ],
               "friday":[  
                  [  
                     "8:00",
                     "20:00"
                  ]
               ],
               "saturday":[  
                  [  
                     "8:00",
                     "20:00"
                  ]
               ],
               "sunday":[  
                  [  
                     "10:00",
                     "16:00"
                  ]
               ]
            },
            "hours_display":"Mon-Sat 8:00 AM-8:00 PM; Sun 10:00 AM-4:00 PM",
            "latitude":50.829975,
            "locality":"Brighton",
            "longitude":-0.136322,
            "name":"Aldi",
            "neighborhood":[  
               "North Laines"
            ],
            "post_town":"Brighton",
            "postcode":"BN1 4JA",
            "region":"East Sussex",
            "tel":"0844 406 8800",
            "website":"http://www.aldi.co.uk/"
         },

`data` is the payload returned by the ajax request. You can access `data` by accessing its properties like a normal JS object. — heartyporridge, Jul 27 '15 at 22:01
@analytalica `dataType: "JSON"` tell jQuery to parse it automatically. — Barmar, Jul 27 '15 at 22:01
remove quotes around variable in append...should be `$('#info').append($latitude);` — charlietfl, Jul 27 '15 at 22:04

Sushanth -- · Accepted Answer · 2015-07-27T22:02:33.263

6

response.data[0].address

supposed to be

data.response.data[0].address

The object that is returned from the BE, is currently in data (parameter for the callback).

So there is one more nested layer before you try accessing the response property.

Also as @chaarlietfl pointed out

$('#info').append("$latitude");
                  ^         ^
                  ---------------> Need to get rid of quotes

edited Jul 27 '15 at 22:02

answered Jul 27 '15 at 22:00

Sushanth --

55,259
9
66
105

Wow, I have been playing with this for 3 hours, thank you so much. So `data` is always the way to initially access the object? Then it depends the structure correct? – dendog Jul 27 '15 at 22:08
It is `data` in this case as the callback was `success: function (data) {` . It could have been `response` if it was `success: function (response) {` . Depends upon the parameter variable that you expect it to be named to. – Sushanth -- Jul 27 '15 at 22:10
So I can name the response object by what I place in `function (HERE)`? Thanks again! – dendog Jul 27 '15 at 22:19

Unable to access JSON response from AJAX API call

1 Answers1