使用AJAX從JSON文件中檢索數據

Question

所以我試圖從我的JSON文件中讀取數據並使用HTML在網頁上顯示它。 它可以使用這個特定數據庫的簡單鍵，它對我不起作用。

JSON：

var carInfo = [
{
    carId: 1,
    carPrice : 15.00,
},
{
    carId: 2,
    carPrice : 25.00,
}
];

JS：

$(document).ready(function() {

    $.getJSON("vehicle_data.json", function(data) {

        $.each(data.carInfo, function() {

            $("ul").append("<li>Car ID: "+this[carInfo[0].carId]);

        });         
    });     
});

HTML：

<html>
<body>
<ul></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="json_data_retrieve.js"></script>
</body>
</html>

Answer 1

它不是有效的JSON文件。 這是一個JS腳本。

var carInfo = [
    {
        carId: 1,
        carPrice : 15.00,
    },
    {
        carId: 2,
        carPrice : 25.00,
    }
];

嘗試這個：

{
    "carInfo": 
    [
        {
            "carId": 1,
            "carPrice": 15
        },
        {
            "carId": 2,
            "carPrice": 25
        }
    ]
}

更新：
您可以將此腳本作為腳本源加載到HTML中。 它必須是.js文件。

<script src="vehicle_data.js"></script>

如果需要動態加載它，請使用jQuery $.getScript方法。 它具有.json擴展名無關緊要，因為它將被評估為腳本。

$(document).ready(function() 
{
    $.getScript("vehicle_data.json", function() 
    {
        // Pay attention. In this case, you work with carInfo 
        // variable because it has been executed as a script, 
        // but not loaded as a JSON file.
        $.each(carInfo, function()             {
            $("ul").append("<li>Car ID: " + this[carInfo[0].carId]);
        });         
    });     
});

但是，有人給你帶有JS聲明的.json文件並告訴你應該執行它但不應該重命名它或加載為腳本是很奇怪的。

Answer 2

看起來您正試圖從內部迭代父對象。 嘗試這個

$.each(data.carInfo, function(k, v) {

        $("ul").append("<li>Car ID: "+v.carId);

    });

使用AJAX從JSON文件中檢索數據

問題描述

2 個解決方案

解決方案1
4 已采納 2015-06-03 04:35:39

解決方案2
-2 2015-06-03 04:43:18

使用AJAX從JSON文件中檢索數據

問題描述

2 個解決方案

解決方案1 4 已采納 2015-06-03 04:35:39

解決方案2 -2 2015-06-03 04:43:18

解決方案1
4 已采納 2015-06-03 04:35:39

解決方案2
-2 2015-06-03 04:43:18