使用 JQuery getJSON 在表中獲取和顯示 JSON 數據時出現問題

Question

我正在嘗試使用 JQuery 方法 getJSON() 從 JSON 文件中獲取和顯示數據。

使用 getJSON 獲取數據，每個部分的數據顯示為 html 表中的新行。

問題是根本沒有獲取或顯示數據。

腳本 URL 很好。

你能幫我找出代碼中的問題嗎？

提前致謝！

索引.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>

例子.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 URL。

我為數據創建了一個 api URL。

然后將 $getJSON 中的 'example.json' 更改為 'http://localhost:3000/apiURL'。

有效！

這是工作代碼：

索引.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 文件添加了 [ ] 以使其可迭代。

例子.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 在表中獲取和顯示 JSON 數據時出現問題

問題描述

1 個解決方案

解決方案1
0 已采納 2022-03-05 06:51:58

使用 JQuery getJSON 在表中獲取和顯示 JSON 數據時出現問題

問題描述

1 個解決方案

解決方案1 0 已采納 2022-03-05 06:51:58

解決方案1
0 已采納 2022-03-05 06:51:58