Ajax显示为未定义

Question

So I'm currently working on this website app and I'm trying to show how many PC's are available in my University using the JSON from the University website and AJAX. I can't figure it out but its showing all the MACs for the first room and then its saying undefined for others, its all one block of code so I can't see where its going wrong any advice would be great.

JS:

    var container = $('div.container');
$('input#get').click(function(){
    $.ajax({
        type: 'GET',
        url: '(mylink)',
        dataType: 'jsonp',
        success: function(data) {
        $.each(data, function(index, item) {
        $.each(item, function(key, value) {
            container.append('<div class="pcsinside">' + value.displayName + '</div>' + 'PCs available:' + '&nbsp' + value.availPCs + '&nbsp' + 'out of' + '&nbsp' + value.numPCs + '<br/>' + 'Macs available:' + '&nbsp' + value.availMacs + '&nbsp' + 'out of' + '&nbsp' + value.numMacs + '<br/>');
           });

          });

         }
     });
})

HTML:

<div class="container">
            <div id="form-area">
            <input id="get" type="submit" value="Press For PC Availability">
            </div>
            <div class="pcsinside">
            </div>
        </div>

This is what it looks like and it does update whenever a PC changes for the PC's and the MACs except for the undefined ones.

It works for the first one but not for the other MACs, whats going on? Any help would be really appreciated thanks guys.

</div>

Answer 1

To display JSON as string you need to use JSON.stringify() function :

container.append('<div>'+ JSON.stringify(value.displayName) +'</div>');