使用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);
                                }

                        }
                    });
            });

如果有人可以幫助我們解決這個問題，那將是很棒的

提前致謝 ！

Answer 1

不要在for循環中使用多余的循環來提取名稱。

您的數據就像

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

如果[0]中有一個數組，並且您想從中提取值，那么您需要在for循環中使用另一個循環來提取該值，就像您想要提取bushaltes值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

你需要無論是for循環或 $.each ，但不能同時使用。

這是更新的代碼。

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

這是演示

Answer 3

我不明白你為什么要使用jQuery each你的內部for循環。

另外，我認為您應該使用result[x].name而不是field[x].name因為您將result作為回調函數的參數：

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

希望對您有所幫助