使用ajax顯示來自url的JSON數據

Question

我們希望使用javascript將我們的json文件中的所有名稱顯示爲div。我們嘗試了很多東西，但我們沒有成功。

JSON數據：http://www.smartbustracking.be/json/data.json

這是我們的嘗試：

<button>get data</button> 
<div id="resultJson"></div> 


<script type="text/javascript" language="javascript"> 
      $("button").click(function(){ 
        $.getJSON("http://www.smartbustracking.be/json/data.json", function(result){ 
         for(var x = 0; x < result.length; x++){ 

           $.each(result, function(i, field) { 
            $("#resultJson").append(field[x].name); 
           } 

         } 
        }); 
      }); 

如果任何人都可以幫助我們解決這個ploblem，那將是巨大的

提前感謝！

Answer 1

不要在循環內部使用額外的循環來提取名稱。

你的數據是一樣

[0] = {name:"name1"} 
[1] = { name: "name2"} 

如果裏面有[0]一個數組，並要提取從該值，那麼你需要的另一循環內的循環，以提取這樣的價值，你想拉值的bushaltes。

嘗試這樣

$("button").click(function() { 
 
    $.getJSON("http://www.smartbustracking.be/json/data.json", function(result) { 
 
     console.log(result); 
 
     for (var x = 0; x < result.length; x++) { 
 
      $("#resultJson").append(result[x].name); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>get data</button> 
 
<div id="resultJson"></div>

Answer 2

我不明白你爲什麼要使用jQuery each您for循環內。

Additionnaly，我覺得你是給result回調函數的參數，你應該使用result[x].name代替field[x].name：

$.getJSON("http://www.smartbustracking.be/json/data.json", function(result){ 
         for(var x = 0; x < result.length; x++){ 
            $("#resultJson").append(result[x].name); 
         } 
        }); 

我希望它能幫助

Answer 3

你需要要麼的for環或$.each但不是兩者。

這是更新的代碼。

$("button").click(function(){ 
     $.getJSON("http://www.smartbustracking.be/json/data.json", function(result){ 
      $.each(result, function(i, field) { 
       $("#resultJson").append(field.name); 
      }); 
     }); 
    }); 

和這裏的demo