Javascript 从XML提取数据不起作用

我是XML和JSON的初学者，无法在HTML中显示数据。我试图从XMLAPI中提取数据，并将其显示在我的div中

但我的分区里似乎什么也没显示。如果我的代码有点乱，我很抱歉。如果希望查看XML文件的外观，可以参考

更新 在将数据源更改为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);

    }



}

var json4day//全局变量-所有函数都可以读取和存储其中的值
$（函数（）{
Load4day（）；//调用函数加载数据****
});
函数Load4day（）{
//这里是2小时代码
$.ajax({
url:“https://api.data.gov.sg/v1/environment/4-day-weather-forecast",
数据类型：“json”，
标题：{“api密钥”：“NVJYBRCT4KMLNJQRKWLC0BE9V5ZFYXZ”
}
})
.done（函数（json）{//tween max oncomplete
json4day=json；
ShowData（）；//加载PSI*****
})
.fail（函数（）{
控制台日志（“错误”）；
});
}
函数ShowData（）{
console.log（“显示数据”）；
console.log（json4day）；
var tforecasts=json4day.items[0].forecast.length；
console.log（tforecasts）；
对于（var i=0；i
4小时预测
点击这里

这里的问题肯定是，您使用了错误的对象

ajax调用返回的不是JSON对象，而是行为不同于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行，它将正常工作

（替换给定元素中的内容）和（在给定元素末尾追加内容）之间存在巨大差异

var json4day；//全局变量-所有函数都可以在其中读取和存储值
$（函数（）{
$（“.content1”）.html（“”）；
Load4day（）；//调用函数加载数据****
});
函数Load4day（）{
//这里是2小时代码
$.ajax({
url:“https://api.data.gov.sg/v1/environment/4-day-weather-forecast",
数据类型：“json”，
标题：{
“api密钥”：“NVJYBRCT4KMLNJQRKWLC0BE9V5ZFYXZ”
}
})
.done（函数（json）{//tween max oncomplete
json4day=json；
ShowData（）；//加载PSI*****
})
.fail（函数（）{
控制台日志（“错误”）；
});
}
函数ShowData（）{
console.log（“显示数据”）；
console.log（json4day）；
var tforecasts=json4day.items[0].forecast.length；
console.log（tforecasts）；
对于（变量i=0；i“+fc+”
”；
var html2=“”+日期+”
“+fc+”
”；
$（“.content1”）.append（html）；
//$（“.content1”）.html（html）；
//$（“.content1”）.append（html2）；
//$（“.content1”）.html（html2）；
}
}
4小时预测
点击这里
一些文本

Hihi，谢谢你的回复。我已经编辑了我的帖子，并将数据源更改为json。我的数据现在显示出来了！但它只显示1天的预测。我怎样才能让它显示更多天？

$(".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