根据ajax json响应更新html表

Question

i have a JSON response like below

{
   "Parent": "skystar",
   "Children": [
     {"Name":"MW"},
     {"Name":"PR"},
     {"Name":"PV"},
     {"Name":"ST"}
   ]
},
{
       "Parent": "RR",
       "Children": [
         {"Name":"RC"},
         {"Name":"RP"}
       ]
    }

Now i need to bind this to the table.

i tried to call AJAX like below

$.ajax({
    url: 'echo/sample.json/',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr><td>' + item.Children + '</td>';
        });
        $('#records_table').append(trHTML);
    }
});

But i am not able to bind the table

what i am doing wrong??

JSFIDDLE

one more thing every children has hypher link how to add it

How to do that in Jquery or javascript??

Any help??

Answer 1

Please see following JSFiddle http://jsfiddle.net/s701aduz/

var jsonData = '[{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}]';

$.ajax({
    url: '/echo/json/',
    type: 'POST',
    data: {
        json: jsonData
    },
    dataType:'json',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr>';
            $.each(item.Children, function(j, child) {
                trHTML += '<tr><td>' + child.Name + '</td>';
            });
            trHTML += '</tr>';
        });
        $('#records_table').append(trHTML);
    }
});

The problem you had was that item.Children was an array itself so when you included that in the string it would simply output [object Object] , you have to iterate over the children as well. Also make a row for each element in the response and a td for each child, or at least I'm guessing that's what you were intending.

Answer 2

Demo: http://jsfiddle.net/tqyn3/336/

var jsonData = '[{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}]';

$.ajax({
    url: '/echo/json/',
    type: 'POST',
    data: {
        json: jsonData
    },
    dataType:'json',
    success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
           //alert(item.children);
            $.each(item.Children, function(j, child) {
                trHTML += '<tr><td>' + child.Name + '</td>';
            });

        });
        $('#records_table').append(trHTML);
    }
});

Answer 3

var json_data = $.parseJSON(response);
    var table = $('<table>');
    $.each(json_data,function(index,obj){
        var tr = $('<tr>');
        $.each(obj.Children,function(_index,_children){
            var td = $('<td>');
            $(td).text(_children.Name);
            $(tr).append(td);
        })

         $('#records_table').append(tr);
    });

Answer 4

var jsonData = [{"Parent":"skystar","Children":[{"Name":"MW"},{"Name":"PR"},{"Name":"PV"},{"Name":"ST"}]},
{"Parent":"RR","Children":[{"Name":"RV"},{"Name":"RP"}]}
];

$.each(jsonData, function (i, item) {
    if(i == 0) {
        $('#records_table').find('th:first').html(item.Parent);
    } else {
        $('#records_table').find('th:last').after('<th>'+ item.Parent +'</th>');
    }

    $.each(item.Children, function(j, child){
        if(i==0) {
            var tr = $('<tr />');
            var td = $('<td />');
            $(td).text(child.Name);
            $(tr).append(td);
            $('#records_table').append( tr );
        } else {
            var td = $('<td />');
            $(td).text(child.Name);
            $('#records_table').find('tr:eq('+(j+1)+')').append( td );
        }
    })
});

Check it will help you http://jsfiddle.net/tqyn3/338/