我真的很难让我的 json 数据显示在使用 javascript 的表中

Posted 2023-03-05

技术标签:

【中文标题】我真的很难让我的 json 数据显示在使用 javascript 的表中【英文标题】：I'm really struggling with getting my json data to show up in a table using javascript 【发布时间】：2020-04-30 17:07:17 【问题描述】：

我有一个源模型脚本，当我尝试复制时，它似乎无法正常工作。谁能告诉我哪里出错了？

html（这只是说明表格应该放在哪里，并且 JS 脚本在最后，所以完整的 HTML 在运行脚本之前运行，所以我认为这里没有任何问题）：

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>'>Weather App</h1>
    </header>
    <section>
        <table id="weather"></table>
        <div id="info"></div>
    </section>
<footer>
</footer>
<script src="weather.js" type="text/javascript"></script>
</body>
</html>

JavaScript（我很确定问题就在这里，但我不知道为什么。我知道问题可能出在表格格式的响应部分，但我对如何以及为什么感到困惑):

(function updateWeather()) 
    setTimeout(function() 
        $.ajax(
            url: "weather.json",
            type: "GET",
            dataType: "json",
            success: function(response) 
                let sTxt = "";
                $("#weather").html("");
                $.each(response.cities, function(index) 
                    sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
                        "</td><td>" + response.cities[index].currentConditions +
                        "</td><td>" + response.cities[index].temperature + "</td><td>" +
                        response.cities[index].windSpeed + "</td><td>" + response.cities[
                            index].windDirection + "</td><td>" + response.cities[index].windChillFactor +
                        "</td>" + "</td><td></td><td></td></tr>";;
                )
                $("#weather").append(sTxt);
                updateWeather();
            ,
            error: function() 
                $("#info").html("<p>An error has occured</p>");)
        );
    , 250);
)();

JSON（我不认为这里有什么问题）：


    "cities": [
      
        "cityID": "1",
        "cityName": "London",
        "currentConditions": "Warm and Windy",
        "temperature": "28",
        "windSpeed": "12",
        "windDirection": "North East",
        "windChillFactor": "0"
      ,
      
        "cityID": "2",
        "cityName": "Canterbury",
        "currentConditions": "Light Showers",
        "temperature": "26",
        "windSpeed": "4",
        "windDirection": "North",
        "windChillFactor": "0"
      ,
      
        "cityID": "3",
        "cityName": "Margate",
        "currentConditions": "Windy",
        "temperature": "27",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "5"
      ,
      
        "cityID": "4",
        "cityName": "Whitstable",
        "currentConditions": "Rain",
        "temperature": "21",
        "windSpeed": "6",
        "windDirection": "West",
        "windChillFactor": "7"
      ,
      
        "cityID": "5",
        "cityName": "Herne Bay",
        "currentConditions": "Rain",
        "temperature": "19",
        "windSpeed": "8",
        "windDirection": "South",
        "windChillFactor": "0"
      ,
      
        "cityID": "6",
        "cityName": "Ramsgate",
        "currentConditions": "Light Showers",
        "temperature": "22",
        "windSpeed": "4",
        "windDirection": "South East",
        "windChillFactor": "-2"
      ,
      
       "cityID": "7",
        "cityName": "Dover",
        "currentConditions": "Strong Winds",
        "temperature": "36",
        "windSpeed": "12",
        "windDirection": "South West",
        "windChillFactor": "3"
      ,
      
        "cityID": "8",
        "cityName": "Folkestone",
        "currentConditions": "Cloudy",
        "temperature": "27",
        "windSpeed": "9",
        "windDirection": "North",
        "windChillFactor": "-10"
      ,
      
        "cityID": "9",
        "cityName": "Deal",
        "currentConditions": "Hot",
        "temperature": "29",
        "windSpeed": "7",
        "windDirection": "North East",
        "windChillFactor": "-5"
      ,
      
        "cityID": "10",
        "cityName": "Ashford",
        "currentConditions": "Strong Showers",
        "temperature": "17",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "-7"
      ,
    ]

感谢您的任何建议。

【问题讨论】：

您的字符串连接中似乎有一个额外的结束标签</td>。添加response.cities[index].windChillFactor 后，您有两个结束标签。你在同一个语句中还有一个额外的分号:) 正如@khuynh 所说，在index].windDirection +... 之后确实有一个额外的结束。你到底看到了什么？ @seesharper 好吧，我只能看到 HTML 页面的标题，没有表格。我删除了多余的分号和多余的，但它并没有改变输出。 【参考方案1】：

我认为您可能会因为缺少括号和其他 javascript 语法错误而遇到此问题。

由于您的整个 javascript 函数声明后跟一对 ()，我假设 updateWeather() 函数的目的是自动运行。 See this answer for more info about ()'s.

请试试这个更新的 javascript 代码。

(function updateWeather()

    $.ajax(
            url: "weather.json",
            type: "GET",
            dataType: "json",
            success: function(response) 
                let sTxt = "";
                $("#weather").html("");
                $.each(response.cities, function(index) 
                    sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
                        "</td><td>" + response.cities[index].currentConditions +
                        "</td><td>" + response.cities[index].temperature + "</td><td>" +
                        response.cities[index].windSpeed + "</td><td>" + response.cities[
                            index].windDirection + "</td><td>" + response.cities[index].windChillFactor +
                        "</td>" + "</td><td></td><td></td></tr>";;
                )
                $("#weather").append(sTxt);
                //updateWeather();
            ,
            error: function() 
                $("#info").html("<p>An error has occured</p>")
            
        )

)();

附：如果使用本地 json 文件进行测试，您将遇到 CORS 错误，因为我是“从源 'null' 访问 'file:///C:/Users/blah/blah/blah/weather.json' 的 XMLHttpRequest”被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https" 您可能已经解决了这个问题，但您需要将您的 json 放在服务器上或 CORS 策略允许的东西上。 See this answer

祝你好运！

【讨论】：

我试过这个，成功是我至少得到了错误函数，但我仍然没有将数据放入表中。感谢您的支持。【参考方案2】：

我可以使用以下函数获得表格渲染。您有一些需要更正的语法错误。我暂时省略了 ajax，因为正如 Rob 所提到的，您遇到了 CORS 错误。

(function updateWeather() 
  setTimeout(function() 
    let sTxt = "";
    $("#weather").html("");
    $.each(response.cities, function(index) 
      sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
              "</td><td>" + response.cities[index].currentConditions +
              "</td><td>" + response.cities[index].temperature + 
              "</td><td>" + response.cities[index].windSpeed + 
              "</td><td>" + response.cities[index].windDirection +
              "</td><td>" + response.cities[index].windChillFactor +
              "</td><td></td><td></td></tr>";
    )
    $("#weather").append(sTxt);
  , 250)
)()

这是上下文的完整文件：

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>Weather App</h1>
    </header>
    <section>
        <table id="weather"></table>
        <div id="info"></div>
    </section>
<footer>
</footer>
<script>
const response = 
    "cities": [
      
        "cityID": "1",
        "cityName": "London",
        "currentConditions": "Warm and Windy",
        "temperature": "28",
        "windSpeed": "12",
        "windDirection": "North East",
        "windChillFactor": "0"
      ,
      
        "cityID": "2",
        "cityName": "Canterbury",
        "currentConditions": "Light Showers",
        "temperature": "26",
        "windSpeed": "4",
        "windDirection": "North",
        "windChillFactor": "0"
      ,
      
        "cityID": "3",
        "cityName": "Margate",
        "currentConditions": "Windy",
        "temperature": "27",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "5"
      ,
      
        "cityID": "4",
        "cityName": "Whitstable",
        "currentConditions": "Rain",
        "temperature": "21",
        "windSpeed": "6",
        "windDirection": "West",
        "windChillFactor": "7"
      ,
      
        "cityID": "5",
        "cityName": "Herne Bay",
        "currentConditions": "Rain",
        "temperature": "19",
        "windSpeed": "8",
        "windDirection": "South",
        "windChillFactor": "0"
      ,
      
        "cityID": "6",
        "cityName": "Ramsgate",
        "currentConditions": "Light Showers",
        "temperature": "22",
        "windSpeed": "4",
        "windDirection": "South East",
        "windChillFactor": "-2"
      ,
      
       "cityID": "7",
        "cityName": "Dover",
        "currentConditions": "Strong Winds",
        "temperature": "36",
        "windSpeed": "12",
        "windDirection": "South West",
        "windChillFactor": "3"
      ,
      
        "cityID": "8",
        "cityName": "Folkestone",
        "currentConditions": "Cloudy",
        "temperature": "27",
        "windSpeed": "9",
        "windDirection": "North",
        "windChillFactor": "-10"
      ,
      
        "cityID": "9",
        "cityName": "Deal",
        "currentConditions": "Hot",
        "temperature": "29",
        "windSpeed": "7",
        "windDirection": "North East",
        "windChillFactor": "-5"
      ,
      
        "cityID": "10",
        "cityName": "Ashford",
        "currentConditions": "Strong Showers",
        "temperature": "17",
        "windSpeed": "5",
        "windDirection": "South East",
        "windChillFactor": "-7"
      ,
    ]
  ;

(function updateWeather() 
  setTimeout(function() 
    let sTxt = "";
    $("#weather").html("");
    $.each(response.cities, function(index) 
      sTxt += "<tr class='weather'><td>" + response.cities[index].cityName +
              "</td><td>" + response.cities[index].currentConditions +
              "</td><td>" + response.cities[index].temperature + 
              "</td><td>" + response.cities[index].windSpeed + 
              "</td><td>" + response.cities[index].windDirection +
              "</td><td>" + response.cities[index].windChillFactor +
              "</td><td></td><td></td></tr>";
    )
    $("#weather").append(sTxt);
  , 250)
)()


</script>   
<!-- <script src="weather.js" type="text/javascript"></script> -->
</body>
</html>

【讨论】：

以上是关于我真的很难让我的 json 数据显示在使用 javascript 的表中的主要内容，如果未能解决你的问题，请参考以下文章

我可以根据站点标准为我的树状图着色吗

2016总结

如何对回收站查看 SQLite 内容进行排序

未调用 PHP 流通知回调

如何整合_测试那种genserver？正确使用assert_receive？

使用backbone.js 从视图访问模型数据