Search code examples
javascriptjqueryjsonclientgetjson

Client call JSON result show as undefined

I have a set of json data which is generated in php with json_decode function, here is the results:

enter image description here

I then create a html document and try to call the result using jquery $.getJSON:

var apiSrc = 'http://localhost/api/ws-data';
var showData = $('#result');

$(function(){

    $.getJSON(apiSrc, function(data) {
        console.log(data);

        var items = data.blog.map(function (item) {
            return item.key + ': ' + item.value;
        });

        showData.empty();

        if(items.length) {
            var content = '<li>' + items.join('</li><li>') + '</li>';
            var list = $('<ul />').html(content);
            showData.append(list);
        }
    });

    showData.text('Loading...');
});

and the results for above is:

REST - Get JSON from PHP file on the server side

    undefined: undefined
    undefined: undefined
    undefined: undefined
    undefined: undefined
    ..

Its shown the key and value as undefined: undefined

What's goes wrong in the script?

Solution

  • I think you should access the correct properties such as pid,category etc of response,

      var items = data.blog.map(function (item) {
            return item.pid + ': ' + item.category;
 });