Question

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

但似乎没有任何东西出现在我的div中。对不起，如果我的代码有点乱。如果要查看XML文件的外观，可以参考http://api.nea.gov.sg/api/WebAPI/?dataset=24hrs_forecast&keyref=781CF461BB6606AD48001FDD2657FAF0F8C6C64F041BB440。

UPDATE 我现在可以在将数据源更改为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>

Answer 1

~~这里的问题肯定是你在处理错误的对象。~~

~~您没有从ajax调用返回的JSON对象。相反，你现在有一个HTMLCollection对象，其行为与JSON不同。~~

更新后：

您的代码替换了内容：

{
  // See https://go.microsoft.com//fwlink//?linkid=834763 for more information about this file.
  "configurations": [
    {
      "name": "x64-Debug",
      "generator": "Ninja",
      "configurationType": "Debug",
      "inheritEnvironments": [ "msvc_x64_x64" ],
      "buildRoot": "${env.USERPROFILE}\\CMakeBuilds\\${workspaceHash}\\build\\${name}",
      "installRoot": "${env.USERPROFILE}\\CMakeBuilds\\${workspaceHash}\\install\\${name}",
      "cmakeCommandArgs": "",
      "buildCommandArgs": "-v",
      "ctestCommandArgs": "",
      "variables": [
        {
          "name": "CMAKE_CXX_COMPILER",
          "value": "clang-cl"
        },
        {
          "name": "CMAKE_C_COMPILER",
          "value": "clang-cl"
        },
        {
          "name": "CMAKE_SYSTEM_NAME",
          "value": "Windows"
        }
      ]
    }
  ]
}

如果删除最后3行，它将正常工作。

JQuery.html()（取代给定元素中的内容）和JQuery.append()（将内容附加到给定元素末尾）之间存在巨大差异。

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

从XML中提取数据不起作用

1 个答案: