javascript - 复杂JSON到HTML表

Question

我知道这个问题已经被问了很多，但我就是情不自禁，因为我认为我的 JSON 有一些奇怪的格式。 我正在调用 bing api，您可以在下面看到它，它会报告如下 JSON:

{
  "authenticationResultCode": "ValidCredentials",
  "brandLogoUri": "http:dev.virtualearth.netBrandinglogo_powered_by.png",
  "copyright": "Copyright © 2020 Microsoft and its suppliers. All rights reserved. This API cannot be accessed and the content and any results may not be used, reproduced or transmitted in any manner without express written permission from Microsoft Corporation.",
  "resourceSets": [
    {
      "estimatedTotal": 44,
      "resources": [
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.12575,
              11.50249
            ]
          },
          "description": "Bei München-Laim - Stockender Verkehr;; vorsichtig an das Stauende heranfahren.",
          "end": "Date(1581665178000)",
          "incidentId": 1717453254024927000,
          "lastModified": "Date(1581643942010)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581061714000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.12562,
              11.5046
            ]
          },
          "type": 2,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.10819,
              11.61907
            ]
          },
          "description": "Bei Woferlstraße - Bauarbeiten auf Abschnitt.",
          "end": "Date(1581974827000)",
          "incidentId": 4267251995514645000,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629269000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.10819,
              11.61907
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.14469,
              11.55741
            ]
          },
          "description": "Zwischen Karlstraße und Hirtenstraße - Bauarbeiten auf Abschnitt.",
          "end": "Date(1585778340000)",
          "incidentId": 3021451548046648000,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629270000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14314,
              11.55658
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.14314,
              11.58826
            ]
          },
          "description": "Bei Franz-Josef-Strauß-Ring - Baustelle.",
          "end": "Date(1609369140000)",
          "incidentId": 337182766905069500,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629314000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14423,
              11.58316
            ]
          },
          "type": 9,
          "verified": true
        },
        {
          "__type": "TrafficIncident:http:schemas.microsoft.comsearchlocalwsrestv1",
          "point": {
            "type": "Point",
            "coordinates": [
              48.141,
              11.5613
            ]
          },
          "description": "Bei Karlsplatz - Bauarbeiten auf Abschnitt. Fahrbahn von auf einen Fahrstreifen verengt.",
          "end": "Date(1581974827000)",
          "incidentId": 1310817648090719700,
          "lastModified": "Date(1581637098936)",
          "roadClosed": false,
          "severity": 2,
          "source": 9,
          "start": "Date(1581629270000)",
          "toPoint": {
            "type": "Point",
            "coordinates": [
              48.14186,
              11.56163
            ]
          },
          "type": 9,
          "verified": true
        }
      ]
    }
  ]
}

我只是无法控制自己只将描述部分放入一个简单的 html 表中。 以下是我现在尝试过的。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
    $.getJSON("http://dev.virtualearth.net/REST/v1/Traffic/Incidents/48.052165,11.722993,48.222626,11.391344?key=BINGKEY").then(function(data)
{console.log(data);

   var tr = data
    for (var i = 0; i < data.resourceSets.estimatedTotal; i++) {
    var tr = $('<tr/>');

    // Indexing into data.report for each td element
    $(tr).append("<td>" + data.resourceSets.resources[i].description + "</td>");
    $('.table1').append(tr);
    }

});
</script>

<table class="table1">
    <tr>
        <th>description</th>
    </tr>
</table>
</body>
</html>

也许有人可以帮助我解决我的问题。 谢谢

Answer 1

resourceSets 是 json 格式的集合，您正尝试将其作为普通属性进行访问。

for(var s = 0; s < data.resourceSets.length; s++) {

    for (var i = 0; i < data.resourceSets[s].resources.length; i++) { 
        var tr = $('<tr/>');

        // Indexing into data.report for each td element
        $(tr).append("<td>" + data.resourceSets[s].resources[i].description + "</td>");
        $('.table1').append(tr);
    }
}

侧面但相关说明:估计总数为 44，但在发布的 json 中，只有 5 个资源。您确定要迭代 44 次吗？如果是，则需要观察数组索引超出范围异常。