Displaying JSON object array in HTML as response from Jersey

Question

I am trying to display a JSON array in HTML which I get as response from Jersey.

I am getting JSON array as follows:

{"balance":
         [
          {"Group":"new","balance":" 10","description":"Cost vehicles"},
          {"Group":"new","balance":"677","description":"Motor vehicles"}
         ]
}

How can I display this kind of JSON in HTML as a table?

Resource methods are as follow:

@GET
@Produces("application/json")
@Path("/view")
public ArrayList<BalanceSheet>  viewBalanceSheet(){

ArrayList <BalanceSheet>  balanceList=BalanceSheetService.getBalanceSheet();

    return balanceList;
}

Use JavaScript. You can ether build it yourself or use one of the hundreds of JavaScript frameworks that can handle json. http://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquer — jHilscher, Mar 02 '15 at 18:42
google angularjs can be used, sample application angularjs+jersey+spring+springsecurity https://github.com/uttesh/AngularJERSEYRESTSpringSecurityTemplate — Uttesh Kumar, Mar 02 '15 at 18:53

wrxsti · Accepted Answer · 2015-03-02T19:15:47.350

0

If you are using jQuery/Ajax to make the call you could do something to this effect:

HTML

<table id="your-table">
    <thead>
        <tr>
            <td>Name</td><td>Group</td><td>Balance</td><td>Description</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

jQuery

$.getJSON('rest/service/view', function (data) {
    $.each(data, function (k, arr) {
        $('#your-table tbody').append('<tr><td>' + k + '</td><td>' + arr.Group + '</td><td>' + arr.balance + '</td><td>' + arr.description + '</td></tr>');
    });
});

Hope this helps. Let me know if I am way off base here.

edited Mar 02 '15 at 19:15

answered Mar 02 '15 at 18:55

wrxsti

3,434
1
18
30

if its $.post() then in my jersey resource it should me "@POST instead of "@GET. and is it var o=$.parseJSON(data) ? – user3946910 Mar 02 '15 at 19:09
Actually you can just use the $.get() method instead, or @POST, whichever you prefer. and yes it is var o = $.parseJSON(data); – wrxsti Mar 02 '15 at 19:11
$("#view").click(function(){ alert("view called"); $.getJSON('rest/service/view', function(data){ $.each(data, function(k, arr){ $('#table tbody').append('' + k + '' + arr.Group + '' + arr.balance + '' + arr.description + ''); }); }); }); – user3946910 Mar 02 '15 at 19:14
i used the above code and its working fine. Thank you for the help – user3946910 Mar 02 '15 at 19:15
No problem, I will change the answer to reflect this. Good job! – wrxsti Mar 02 '15 at 19:15

score 0 · Answer 2 · answered Mar 02 '15 at 18:59

With jQuery you could do something like this:

HTML:

<table>
   <tr></tr>
</table>

jQuery code (it works on how many hashes you have in your json array):

var heads = yourJson.ballance[0];
for (colHead in heads) {
    $('table tr:first-child').append('<th>').html(col);
}


for (var i=0; i<yourJson.ballance.length; i++) {
   var row = yourJson.ballance[i];
   for (col in row) {
      $('table').append('<tr>').append('<td>').html( row[col] );
   }
}

Displaying JSON object array in HTML as response from Jersey

2 Answers2