我是XML和JSON的初学者，我无法在HTML中显示我的数据。我试图从xml api中提取数据并将其显示在我的div中。
但似乎没有任何东西出现在我的div中。对不起，如果我的代码有点乱。如果要查看XML文件的外观，可以参考http://api.nea.gov.sg/api/WebAPI/?dataset=24hrs_forecast&keyref=781CF461BB6606AD48001FDD2657FAF0F8C6C64F041BB440。
更新我现在可以在将数据源更改为json之后显示我的数据，我只能显示2行数据，我不知道为什么会这样。
var json4day; //global variables - all functions can read and store values inside
$(function() {
Load4day(); //call function to load data****
});
function Load4day(){
//2 hour code here
$.ajax({
url: "https://api.data.gov.sg/v1/environment/4-day-weather-forecast",
dataType: "json",
headers: {"api-key": "nVjYBrTc4KMLNjJQrKwlc0Be9V5zFYXZ"
}
})
.done(function(json) { //tween max oncomplete
json4day=json;
ShowData(); //load PSI*****
})
.fail(function() {
console.log("error");
});
}
function ShowData(){
console.log("Show data");
console.log(json4day);
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;
// console.log(lt);
var html="<div data-index='"+i+"'>"+date+"<br>"+fc+"<br></div>";
var html2="<div data-index='"+i+"'>"+date+"<br>"+fc+"<br></div>";
$(".content1").append(html);
$(".content1").html(html);
$(".content1").append(html2);
$(".content1").html(html2);
}
}
我试图在下面的div中显示我的数据
div id="main1">
<div class="b1">
<div class="4hr">
<p class="t1">4 Hour Forecast </p>
<div id="target">
click here
</div>
</div>
<!--<iframe width="600" height="400" src="https://data.gov.sg/dataset/weather-forecast/resource/4df6d890-f23e-47f0-add1-fd6d580447d1/view/91f4e399-5a83-4cab-9491-09464db88661" frameBorder="0"> </iframe>-->
</div>
这里的问题肯定是你在处理错误的对象。
您没有从ajax调用返回JSON对象。相反，你现在有一个HTMLCollection对象，其行为与JSON不同。
更新后：
您的代码替换了内容：
$(".content1").append(html);
// $(".content1").html(html); // Replaces the 'content' in 'content1' class
// $(".content1").append(html2); // Appends the same 'content' again
// $(".content1").html(html2); // Replaces the 'content' in 'content1' class
如果您删除最后3行，它将正常工作。
JQuery.html()（替换给定元素中的内容）和JQuery.append()（将内容附加到给定元素的末尾）之间存在巨大差异。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var json4day; //global variables - all functions can read and store values inside
$(function () {
$(".content1").html("");
Load4day(); //call function to load data****
});
function Load4day() {
//2 hour code here
$.ajax({
url: "https://api.data.gov.sg/v1/environment/4-day-weather-forecast",
dataType: "json",
headers: {
"api-key": "nVjYBrTc4KMLNjJQrKwlc0Be9V5zFYXZ"
}
})
.done(function (json) { //tween max oncomplete
json4day = json;
ShowData(); //load PSI*****
})
.fail(function () {
console.log("error");
});
}
function ShowData() {
console.log("Show data");
console.log(json4day);
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;
// console.log(lt);
var html = "<div data-index='" + i + "'>" + date + "<br>" + fc + "<br></div>";
var html2 = "<div data-index='" + i + "'>" + date + "<br>" + fc + "<br></div>";
$(".content1").append(html);
//$(".content1").html(html);
//$(".content1").append(html2);
//$(".content1").html(html2);
}
}
</script>
</head>
<body>
<div id="main1">
<div class="b1">
<div class="4hr">
<p class="t1">4 Hour Forecast </p>
<div id="target">
click here
</div>
</div>
<div class="content1">some text</div>
<!--<iframe width="600" height="400" src="https://data.gov.sg/dataset/weather-forecast/resource/4df6d890-f23e-47f0-add1-fd6d580447d1/view/91f4e399-5a83-4cab-9491-09464db88661" frameBorder="0"> </iframe>-->
</div>
</body>
</html>