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/"
},
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