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脚本。

bar.addData([40, 60], "Google");

试试这个：

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

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

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

如果需要动态加载它，请使用jQuery <script src="vehicle_data.js"></script>方法。它具有.json扩展名并不重要，因为它将被评估为脚本。

$.getScript

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

Answer 2

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

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

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

    });

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

2 个答案: