數據不顯示

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陣列中的JSON數據）的陣列，並且machine這些計算機對象中的單個。

使用此machines變量可幫助我們避免重複參考desktop.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); 
     } 
    }); 
}); 

BTW我刪除了data陣列和data.push(machine);語句，因爲沒有必要爲那些。 machines上面已經有的數組是與data數組相同的數組：單個機器對象的數組。

---

現在對於一些更有價值的意見：這裏真正的問題是，你還沒有學會如何調試JavaScript。沒關係，但是該學習了！一旦你知道如何調試JavaScript，你就可以自己解決這樣的問題，比在這裏尋求幫助要快得多。

有許多資源可以幫助您學習如何調試JavaScript。一個簡單的谷歌搜索「調試JavaScript」會發現一堆，其中包括Chrome DevTools,Firebug等文章。

下面是代碼的版本，上面一對夫婦的戰略地位debugger聲明：

$(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屬性嗎？再次，您可以在變量面板中查看這兩者，或將它們輸入到控制檯中。