使用AJAX从JSON文件中检索数据

so I am trying to read the data from my JSON file and display it on the webpage using HTML. It would work with simple keys with this particular database it wouldn't work for me.

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

2 个解决方案

#1

It is not a valid JSON file. It is a JS script.

它不是有效的JSON文件。这是一个JS脚本。

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

Try this:

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

Update:
You may load this script as a script source in an HTML. It must be an .js file.

更新:您可以将此脚本作为脚本源加载到HTML中。它必须是.js文件。

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

If you need to load it dynamically, use jQuery $.getScript method. It doesn't matter that it has .json extensions because it will be evaluated as a 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]);
        });         
    });     
});

However, it is very strange that someone gives you .json file with JS declaration and tells you that you should execute it but shouldn't rename it or load as a script.

但是,有人给你带有JS声明的.json文件并告诉你应该执行它但不应该重命名它或加载为脚本是很奇怪的。

#2

-2

Looks like you are trying to iterate the parent object from within itself. Try this

看起来你正在尝试从内部迭代父对象。试试这个

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

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

    });

#1