Javascript 数据不显示

我对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>

下面的代码是html代码

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

---

有人能帮忙吗？我很确定这是一个愚蠢的错误，我看不出来。你没有发布完整的JSON数据，但一个问题似乎是JSON中的“桌面”是顶级JSON对象的属性。但你使用它的时候就好像“桌面”是顶级对象一样

JSON数据实际上是这样的吗

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

另外，您应该将

dataType:'json'

添加到

$.ajax（）

调用中，以确保传入数据被解析为json

在原始代码中，有一个

desktops

变量，其名称意味着它是一个复数形式，但它不是，它是一个单机规范的名称。JSON数据中的名称很糟糕：

desktop

是一个数组，但它的名称意味着它是一个单独的桌面

当然，您可能不得不忍受JSON数据中的坏名称，但至少您可以在自己的代码中选择更有意义的名称。数组使用复数名称，单个对象或其他项目使用单数名称

为了避免混淆，我完全避免使用

desktops

和

desktop

作为变量名，而是将

machines

用于机器对象数组（JSON数据中的

desktop

数组），将

machine

用于这些机器对象中的一个

使用此

机器

变量有助于避免重复引用桌面.Windows8Pc.desktop。这是一个简单的例子，但在更复杂的代码中，您可以通过将变量引用保存到像这样的深度嵌套对象来大大简化它

另一个技巧：与重复向DOM追加内容不同，通常情况下，向HTML文本字符串追加内容，然后在完成后将整个HTML字符串追加或插入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 );
        }
    });
});

在Chrome developer tools打开的情况下运行此版本，它将在每个

调试器

语句中停止。当它停止时，您可以查看相关变量：在第一个

debugger

语句中，您可以检查

json

变量，并且可以在控制台中进行实验。如果您在这里的控制台中键入

json.desktops.Windows8Pc.desktop

，它是否显示您所期望的（一组机器数据对象）？如果没有，请仔细查看

json

变量并查看其中的实际内容

---

在第二个

debugger

语句中，您可以用同样的方法检查

机器

变量。

机器

是物体吗？它是否有

machine.model

属性？同样，您可以在变量面板中或在控制台中键入变量来查看这两个变量。

您可以发布响应中的

desktop

吗？desktop json基本上包含类似以下内容的“桌面”：{“Windows8Pc”：{“桌面”：[{“ID”：“1”，“Make”：“HP”，“model”：“Pavilion 500-250ea”，“价格”：“679.99”，“CPU”：“Core i5-4440”，“操作系统”：“Windows 8.1”，“RAM”：“8”，“HDD”：“2000”，“SSD”：“GPU”：“屏幕”：“图像”：“1.jpg”，“库存”：“10”}..…什么是

item.name

？代码中没有对项的引用。此外，您的

for

循环没有退出条件。将其更改为桌面。Model但仍然为Nothing，并将for更改为for（var i=0；iTHanks for your advice.是的，Json看起来确实是这样的，出于某种原因javascript仍然不工作请参见答案末尾的我的建议。如果javascript代码“出于某种原因”不工作"，你可以找到原因。我会从Chrome开发者工具开始，学习如何设置断点，单步执行代码，并在执行过程中检查变量。如果你这样做，你会发现问题所在，我保证。我在答案中添加了一些特定的调试提示。说真的，花一些时间学习Chrome开发者工具。我我一点也不夸张：这就像获得了一种超能力！您是否添加了

数据类型：“json”

？如果没有它，您可能会将json作为纯文本而不是对象获取。或者使用

$.getJSON（）

，这为您添加了这一功能（但不允许您在以后需要时提供

错误

回调）.是的，所以我已经采纳了您的建议，开始调试和处理，并添加了一个case error函数，正在创建此错误[object object]\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

$(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 );
        }
    });
});

$(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 );
        }
    });
});