使用AJAX从JSON文件中获取数据

Question

使用AJAX从JSON文件中获取数据

3

我将尝试为您翻译IT技术相关内容。以下是需要翻译的内容：

所以我正试图从我的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>

- BaBazinga

2个回答

-2

看起来你正在尝试从父对象内部迭代父对象本身。请尝试这样做

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

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

    });

- Goku

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yeldar Kurmangaliyev · Accepted Answer

这不是一个有效的 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文件，并告诉你执行它，但不要重命名它或作为脚本加载，这非常奇怪。