javascript - 数据不显示

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 作为机器对象数组(JSON 数据中的 desktop 数组)，以及这些机器对象中的单个机器对象的 machine。

使用此machines变量可以帮助我们避免重复引用desktop.Windows8Pc.desktop。这是一个简单的例子，但在更复杂的代码中，您可以通过保存对此类深层嵌套对象的变量引用来极大地简化它。

另一个提示:通常，附加到 HTML 文本字符串，然后在完成后将整个 HTML 字符串附加或插入到 DOM 中，这样可以提高性能，而不是重复附加到 DOM。

最后，您可以使用 $.each() 而不是 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 数组和 data.push(machine); 语句，因为不需要这些。上面的machines数组已经与data数组相同:单个机器对象的数组。

<小时/>

现在提供一些更有值(value)的建议:这里真正的问题是您还没有学会如何调试 JavaScript。没关系，但现在是学习的时候了!一旦您知道如何调试 JavaScript，您将能够自己解决此类问题，比在这里寻求帮助要快得多。

有许多资源可以帮助您学习如何调试 JavaScript。在 Google 上简单搜索“debug 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 );
        }
    });
});

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

在第二个debugger语句中，您可以以相同的方式检查machine变量。 machine 是一个对象吗？它有 machine.model 属性吗？同样，您可以在变量面板中查看这两个内容，也可以通过在控制台中输入它们来查看。