使用 JQuery getJSON 在 table 中获取和显示 JSON 数据时出现问题

Question

我正在尝试使用 JQuery 方法 getJSON() 从 JSON 文件中获取和显示数据。

使用 getJSON 获取数据，每段数据显示为 html table.

中的新行

问题是根本没有获取或显示数据。

脚本 URL 没问题。

能否帮我找出代码中的问题。

提前致谢！

index.html:


<html lang="en">
<head>
    <title>Displaying JSON Data with Ajax</title>  
    <script src="jquery.js"></script>
</head> 
<body>
    <section>
        <h1>Displaying JSON Data with Ajax</h1>
        <table id='table' width='100%'>
            <tr>
                <th>Network</th>
                <th>power</th>
                <th>Members</th>
                <th>Status</th>
            </tr>
            <script>
                $(document).ready(function () {
                    $.getJSON('example.json', 
                        function (data) {
                        var rows = '';
                        $.each(data, function (key, value) {
                            rows += `
                            <tr>
                            <td> ${data[key].items.key} </td>
                            <td> ${data[key].items.value} </td>
                            <td> ${Object.keys(data[key].items).length} </td>
                            <td> ${Object.keys(data[key].obj).length} </td>
                            </tr>
                            `;
                        });  
                        $('#table').append(rows);
                    });
                });
            </script>
        </table>
    </section>
</body>
</html>

example.json:


{
  "items": [
    {
      "key": "First",
      "value": 100
    },
    {
      "key": "Second",
      "value": false
    },
    {
      "key": "Last",
      "value": "Mixed"
    }
  ],
  "obj": {
    "number": 1.2345e-6,
    "enabled": true
  },
  "message": "Strings have to be in double-quotes."
}

Answer 1

原来 $getJSON 只接受有效的 api URLs.

我为数据创建了一个 api URL。

然后将$getJSON中的'example.json'改为'http://localhost:3000/apiURL'。

成功了！

这是工作代码：

index.html:


<html lang="en">
<head>
    <title>Displaying JSON Data with Ajax</title>  
    <script src="jquery.js"></script>
</head> 
<body>
    <section>
        <h1>Displaying JSON Data with Ajax</h1>
        <table id='table' width='100%'>
            <tr>
                <th>Network</th>
                <th>power</th>
                <th>Members</th>
                <th>Status</th>
            </tr>
            <script>
                $(document).ready(function () {
                    $.getJSON('http://localhost:3000/apiURL', 
                        function (data) {
                        var rows = '';
                        $.each(data, function (key, value) {
                            rows += `
                            <tr>
                            <td> ${data[key].items.key} </td>
                            <td> ${data[key].items.value} </td>
                            <td> ${Object.keys(data[key].items).length} </td>
                            <td> ${Object.keys(data[key].obj).length} </td>
                            </tr>
                            `;
                        });  
                        $('#table').append(rows);
                    });
                });
            </script>
        </table>
    </section>
</body>
</html>

还将 [ ] 添加到 json 文件以使其可迭代。

example.json:


[{
  "items": [
    {
      "key": "First",
      "value": 100
    },
    {
      "key": "Second",
      "value": false
    },
    {
      "key": "Last",
      "value": "Mixed"
    }
  ],
  "obj": {
    "number": 1.2345e-6,
    "enabled": true
  },
  "message": "Strings have to be in double-quotes."
}]

使用 JQuery getJSON 在 table 中获取和显示 JSON 数据时出现问题

Problem Fetching and Displaying JSON Data in table using JQuery getJSON

html

javascript

jquery

getjson