I'm currently doing a project for a coding course. I'm trying to pull data from the GeoName TimeZone API to display on a page but I'm very stuck and I've not been able to narrow down what the problem is. Is anything able to help.
Here is my code -
index.html -
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<th>API Name</th>
<th>API Description</th>
<th></th>
</tr>
<tr>
<td>1. Timezone</td>
<td><p id="tabledescriptions">Description</p>
<p>The timezone at the given longtitute and latitude.</p>
<label for="longitude">Enter the Longitude: </label>
<input type="text" id="long" name="longtitude">
<label for="latitude">Enter the Latitude: </label>
<input type="text" id="lat" name="latitude">
</td>
<td><button id="buttonrun1">Submit 1</button></td>
</tr>
<tr>
<td>2. Name</td>
<td>Description</td>
<td><button id="buttonrun2">Submit</button></td>
</tr>
<tr>
<td>2. Name</td>
<td>Description</td>
<td><button id="buttonrun3">Submit</button></td>
</tr>
<tr>
<td><p id="tabledescriptions">Result of Timezone API Call</p></td>
<td><p id="sunrise"></p><br><br>
<p id="sunset"></p><br><br>
<p id="country"></p><br><br>
<p id="timeZone"></p><br><br>
<p id="timeNow"></p>
</td>
</tr>
</table>
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/main.js"></script>
</body>
<footer>
</footer>
</html>
main.js
$('#buttonrun1').on('click', function() {
$.ajax({
url: "libs/php/getTimeZone.php",
type: 'POST',
dataType: 'json',
data: {
longitude: $('#long').val(),
latitude: $('#lat').val()
},
success: function(result) {
console.log(JSON.stringify(result));
if (result.status.name == "ok") {
$('#sunrise').html(result['data'][0]['sunrise']);
$('#sunset').html(result['data'][0]['sunset']);
$('#country').html(result['data'][0]['countryName']);
$('#timeZone').html(result['data'][0]['timezoneId']);
$('#timeNow').html(result['data'][0]['time']);
}
},
error: function(jqXHR, textStatus, errorThrown) {
// your error code
}
});
});
getTimeZone.php
<?php
// remove for production
ini_set('display_errors', 'On');
error_reporting(E_ALL);
$executionStartTime = microtime(true);
$url='http://api.geonames.org/timezoneJSON?lat=' . $_REQUEST['latitude'] . '&lng=' . $_REQUEST['longitude'] . '&username=t90moy';
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);
$decode = json_decode($result,true);
$output['status']['code'] = "200";
$output['status']['name'] = "ok";
$output['status']['description'] = "success";
$output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
$output['data'] = $decode;
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>
Any assistance would be much appreciated :)
This section os wrong
console.log(JSON.stringify(result));
if (result.status.name == "ok") {
$('#sunrise').html(result['data'][0]['sunrise']);
$('#sunset').html(result['data'][0]['sunset']);
$('#country').html(result['data'][0]['countryName']);
$('#timeZone').html(result['data'][0]['timezoneId']);
$('#timeNow').html(result['data'][0]['time']);
}
You are passing back JSON that will be converted to an javascript object so
console.log(result);
if (result.status.name == "ok") {
$('#sunrise').html(result->data->sunrise);
$('#sunset').html(result->data->sunset);
$('#country').html(result->data->countryName);
$('#timeZone').html(result->data->timezoneId);
$('#timeNow').html(result->data->time);
}