As a newcomer to XML and JSON, I am facing difficulties in displaying my data in an HTML div. I am attempting to extract data from the xml api and showcase it within my div.
Unfortunately, nothing is showing up in my div. Please excuse the messy code. If you're interested, you can view how the XML file looks like by visiting this link.
UPDATE After switching to a json data source, I've managed to display my data. However, only two lines of data are visible and I'm unsure why this is happening.
var json4day; //global variables - values accessible by all functions
$(function() {
Load4day(); //calling function to load data****
});
function Load4day(){
$.ajax({
url: "https://api.data.gov.sg/v1/environment/4-day-weather-forecast",
dataType: "json",
headers: {"api-key": "nVjYBrTc4KMLNjJQrKwlc0Be9V5zFYXZ"}
})
.done(function(json) {
json4day=json;
ShowData();
})
.fail(function() {
console.log("error");
});
}
function ShowData(){
console.log("Displaying data");
var tforecasts=json4day.items[0].forecasts.length;
console.log(tforecasts);
for(var i=0;i<tforecasts;i++){
var fc=json4day.items[0].forecasts[i].forecast;
var date=json4day.items[0].forecasts[i].date;
var icon=json4day.items[0].forecasts[i].relative_humidity;
var html="<div data-index='"+i+"'>"+date+"<br>"+fc+"<br></div>";
$(".content1").append(html);
}
}
I am aiming to present my data in the following div:
<div id="main1">
<div class="b1">
<div class="4hr">
<p class="t1">4 Hour Forecast </p>
<div id="target">
click here
</div>
</div>
</div>