Question

我对json和javascript相对较新。我写了一些javascript，假设从json文件中获取数据并将其显示在div标签中。

以下代码是javascript

<script type="text/javascript">
    $(document).ready(function(){
    $.ajax(
    { 
    type:'GET',     
    url:"json/desktop.json",  
    success:function(desktop)   { 
        var data = [];

            for (var i=0; i<desktop.Windows8Pc.desktop.length; i++)   { 
                var desktops = desktop.Windows8Pc.desktop[i];
                data.push(desktops);
                content = "<p>" + desktops.model + "</p>";
                $(content).appendTo("#div1");

                }


        }
    });

    });
    </script>

Json文件包含类似这样的内容

    "desktops":
{
    "Windows8Pc":
    {
        "desktop":
        [
            {
                "ID":"1",
                "Make":"HP",
                "model": "Pavilion 500-250ea",
                "Price": "679.99",
                "CPU": "Core i5-4440",
                "OS": "Windows 8.1",
                "RAM": "8",
                "HDD": "2000",
                "SSD": "",
                "GPU":"",
                "Screen":"",
                "Image": "1.jpg",
                "stock": "10"
            }, ....

以下代码是html代码

<div id="div1"></div>

有人可以帮忙吗？我很确定这是一些我看不见的愚蠢错误

Answer 1

您没有发布完整的JSON数据，但有一个问题似乎是JSON中的“桌面”是顶级JSON对象的属性。但是你正在使用它，好像“桌面” 是顶级对象。

JSON数据实际上看起来像这样吗？

{
    "desktops": {
        "Windows8Pc": {
            "desktop": [
                {
                    "ID":"1",
                    ...
                },
                ...
            ]
        }
    }
}

此外，您应该在dataType: 'json'调用中添加$.ajax()，以确保将传入数据解析为JSON。

在原始代码中，有一个desktops变量，其名称暗示它是复数 - 但它不是，它是单个机器规范的名称。并且JSON数据中的名称很差：desktop是一个数组，但其名称暗示它是单个桌面。

当然，您可能只需要使用JSON数据中的错误名称，但至少您可以在自己的代码中选择更有意义的名称。对数组使用复数名称，为单个对象或其他项使用单数名称。

为了避免混淆，我完全避免使用desktops和desktop这两个词作为变量名，而是将machines用于机器对象数组（desktop数组中的machine对于这些机器对象中的一个，JSON数据）和machines。

使用此desktop.Windows8Pc.desktop变量可帮助我们避免重复引用$.each()。这是一个简单的例子，但是在更复杂的代码中，你可以通过保存对这些深度嵌套对象的变量引用来大大简化它。

另一个提示：不是重复附加到DOM，而是通常更好地将性能附加到HTML文本字符串，然后在完成后追加或将整个HTML字符串插入DOM中。

最后，您可以使用for代替$(document).ready( function() { $.ajax({ type: 'GET', url: "json/desktop.json", dataType: "json", success: function( json ) { var html = ''; var machines = json.desktops.Windows8Pc.desktop; $.each( machines, function( i, machine ) { html += "<p>" + machine.model + "</p>"; }); $("#div1").html( html ); } }); });循环来使代码更清晰。

所以代码可能如下所示：

data

BTW我删除了data.push(machine);数组和machines语句，因为没有必要。上面已经的data数组与debugger数组相同：一个单独的机器对象数组。

现在提供一些更有价值的建议：这里真正的问题是你还没有学会如何调试JavaScript。没关系，但现在是时候学习了！一旦你知道如何调试JavaScript，你就可以自己解决这样的问题，比在这里寻求帮助要快得多。

有许多资源可以帮助您学习如何调试JavaScript。一个简单的谷歌搜索“调试javascript”将找到一堆，包括Chrome DevTools，Firebug等文章。

以上是上面代码的一个版本，其中包含几个策略性的$(document).ready( function() { $.ajax({ type: 'GET', url: "json/desktop.json", dataType: "json", success: function( json ) { debugger; var html = ''; var machines = json.desktops.Windows8Pc.desktop; $.each( machines, function( i, machine ) { debugger; html += "<p>" + machine.model + "</p>"; }); $("#div1").html( html ); } }); });语句：

debugger

在Chrome开发者工具打开的情况下运行此版本，它将在每个debugger语句中停止。当它停止时，您可以查看相关变量：在第一个json语句中，您可以检查json.desktops.Windows8Pc.desktop变量，并且可以在控制台中进行实验。如果在此处在控制台中键入json，它是否显示您所期望的内容（一组机器数据对象）？如果没有，请仔细查看debugger变量并查看其中的实际内容。

在第二个machine语句中，您可以以相同的方式检查machine变量。 machine.model是一个对象吗？它有{{1}}属性吗？您可以再次在变量面板中查看这些内容，或者在控制台中键入它们。

数据不显示

1 个答案: