无法使用Ajax Json响应填充表

Question

I am sending this valid JSON as a response from my webservice call

[
    [
        {
            "id": 123,
            "vendorName": "PoppyCounter",
            "item": "Chocltae"
        },
        {
            "id": 1234,
            "vendorName": "PoppyCounter",
            "item": "Chocltae"
        },
        {
            "id": 12345,
            "vendorName": "PoppyCounter",
            "item": "Chocltae"
        },
        {
            "id": 123456,
            "vendorName": "MahalakshmiCounter",
            "item": "Chocltae"
        }
    ]
]

This is my Jquery

$(document).ready(function() {
        $.ajax({
            type: 'GET',
            url: 'http://192.168.2.46:8086/Poller/poll/initial',
            jsonpCallback: 'jsonCallback',
            dataType: 'jsonp',
            success: function (response) {
                var trHTML = '';
                $.each(response, function (i, item) {
                    trHTML += '<tr><td>' + item.id + '</td><td>' + item.vendorName + '</td><td>' + item.item + '</td></tr>';
                });
                $('#records_table').append(trHTML);
            },
            error: function (e) {
                $("#divResult").html("WebSerivce unreachable");
            }
        });



    });


<table id="records_table" border='1'>
    <tr>
        <th>Rank</th>
        <th>Content</th>
        <th>UID</th>
    </tr>

With this the result is looking like this in browser

I am editing my question

Edited Part

Due to the cross domain restrictions , i am forming my JSON into jsonp as shown below

This is my ajax jquery request

 $(document).ready(function() {
        $.ajax({
            type: 'GET',
            url: 'http://192.168.2.46:8086/Poller/poll/initial',
            jsonpCallback: 'jsonCallback',
            dataType: 'jsonp',
            jsonp: false,
            success: function (response) {
                var trHTML = '';
                $.each(response, function (i, item) {
                      trHTML += '<tr><td>' + item.id + '</td><td>' + item.vendorName + '</td><td>' + item.item + '</td></tr>';
                });
                $('#records_table').append(trHTML);

                doPoll();
            },
            error: function (e) {
                $("#divResult").html("WebSerivce unreachable");
            }
        });

    });

Due to the jsonCallback , its not forming a valid JSON response and i am getting undefined when forming the table IS there anyway i can from the valid JSON response ??

jsonCallback([
    [
        {
            "id": 123,
            "vendorName": "PoppyCounter",
            "item": "Chocltae"
        },
        {
            "id": 1234,
            "vendorName": "PoppyCounter",
            "item": "Chocltae"
        },
        {
            "id": 12345,
            "vendorName": "PoppyCounter",
            "item": "Chocltae"
        },
        {
            "id": 123456,
            "vendorName": "MahalakshmiCounter",
            "item": "Chocltae"
        }
    ]
])

Answer 1

You have to have one more $.each() loop:

$.each(response, function (i, item) {
    $.each(item, function(_, o){
      trHTML += '<tr><td>' + o.id + '</td><td>' + o.vendorName + '</td><td>' + o.item + '</td></tr>';
    });
});

Answer 2

your data is an array in an array, and you consider it only as an array

try to do the same each loop on response[0] for example

EDIT

I'm not sure you can use jquery each on a JSON object, instead you should use :

for(var i in response) {
    response[i]; // do something with it
}

Answer 3

You appear to be having another array in that result. Try to loop one more time, like this for instance: http://jsfiddle.net/yH942/1/

$.each(jsonResponse, function(key, array) {
$.each(array, function(k, object) {
    // your code goes here
});
});

Answer 4

Parse your object after receiving or use $.getJSON instead of $.ajax. You are trying to use a string as an object.

success: function (response) {
   response = JSON.parse(response);
}