Could not access JSON response from AJAX API call
I am unable to access and add the response from the AJAX call to the actual API.
I am getting undefined errors however I am trying to structure my access and iteration code over response.
I was able to successfully log the data to the console, now just need to add to the HTML on the page.
Below is the current structure of the code and API response, what I don't understand when to use data
and what exactly is it related to? Whether it is 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/"
},
source to share
response.data[0].address
supposed
data.response.data[0].address
The object that is returned from BE is currently in data
(parameter for callback).
So, there is one more nested layer before trying to access the response property.
Also as @chaarlietfl pointed out
$('#info').append("$latitude");
^ ^
---------------> Need to get rid of quotes
source to share