从 XML 中提取数据不起作用答案

【问题标题】：Extracting data from XML not working从 XML 中提取数据不起作用
【发布时间】：2018-05-31 00:27:03
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript html css json xml

【解决方案1】：

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

~~您没有从 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>

【讨论】：

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