BubbleMint BubbleMint - 1 year ago 101
Javascript Question

Jquery appending undefined

I'm having issues with appending a json. It print's multiple undefineds and i'm unsure what the cause is.

My code:

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

Linked js fiddle showing the issue;


Why does it do it? and what are the possible workarounds?

Answer Source

The JSON you're getting back looks like this:

    "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"

That's not something you have to loop through with $.each, and looping through it with $.each is the problem.

Just use it directly:

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

Note that the three fields you're accessing are accessed in that like this:

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

Updated Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download