Jquery appending undefined

Question

jsonを追加する際に問題があります。それは複数の定義されていないものを印刷し、私はその原因が不明です。

マイコード：

$("button").click(function() { 
    $.getJSON("https://api.myjson.com/bins/503aj", function(obj) { 
     $.each(obj, function(key, test) { 
     $("ul").append("<div>" + test.CustomerRef + "</div>" + "<div>" + obj.CustomerName + "</div>" + "<div>" + test.DelAddress1 + "</div>"); 
     }); 
    }); 
    }); 

問題を示すjsのリンクフィドル。

https://jsfiddle.net/7vshmzj7/

なぜそれを行うのですか？考えられる回避策は何ですか？

Answer 1

あなたが戻って取得しているJSONは次のようになります。

{ 
    "AddressData": { 
     "OrderNo": "4200", 
     "CustomerRef": "A1011", 
     "DelAddress1": "4 Test Road", 
     "DelAddress2": "Testing Lane", 
     "DelAddress3": "Testland", 
     "DelAddress4": "UK", 
     "DelPostCode": "DB11 8DA" 
    }, 
    "CustomerRef": "A1011", 
    "CustomerName": "John Doe", 
    "CustomerData": { 
     "Email": "JohnDoe2500@gmail.com", 
     "Phone": "07785442" 
    } 
} 

$.eachとをループにあなたが持っているものではないのです、と$.eachでそれをループすることは問題であること。

ただ、直接それを使用する：あなたがアクセスしている三つのフィールドは次のようにその中にアクセスされていることを

$("button").click(function() { 
    $.getJSON("https://api.myjson.com/bins/503aj", function(obj) { 
     $("ul").append("<div>" + obj.CustomerRef + "</div>" + "<div>" + obj.CustomerName + "</div>" + "<div>" + obj.AddressData.DelAddress1 + "</div>"); 
    }); 
}); 

注：

• obj.CustomerRef
• obj.CustomerName
• obj.AddressData.DelAddress1

を

Updated Fiddle