在 HTML 中显示 JSON 对象数组作为来自 Jersey 的响应答案

【问题标题】：Displaying JSON object array in HTML as response from Jersey在 HTML 中显示 JSON 对象数组作为来自 Jersey 的响应
【发布时间】：2015-03-02 18:36:23
【问题描述】：

我正在尝试在 HTML 中显示一个 JSON 数组，作为来自 Jersey 的响应。

我得到如下 JSON 数组：

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

如何在 HTML 中将这种 JSON 显示为表格？

资源方式如下：

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

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

    return balanceList;
}

【问题讨论】：

使用 JavaScript。您可以自行构建它，也可以使用数百个可以处理 json 的 JavaScript 框架之一。 stackoverflow.com/questions/1051061/…
您是否使用 jquery/ajax 发出请求？
google angularjs可以用，示例应用angularjs+jersey+spring+springsecuritygithub.com/uttesh/AngularJERSEYRESTSpringSecurityTemplate

标签： java jquery json jersey

【解决方案1】：

如果您使用 jQuery/Ajax 进行调用，您可以执行以下操作：

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>');
    });
});

希望这会有所帮助。让我知道我是否离这里很远。

【讨论】：

如果它的 $.post() 那么在我的球衣资源中它应该是“@POST 而不是”@GET。是 var o=$.parseJSON(data) 吗？
实际上你可以使用 $.get() 方法，或者@POST，随你喜欢。是的，它是 var o = $.parseJSON(data);
$("#view").click(function(){ alert("view called"); $.getJSON('rest/service/view', function(data){ $.each (数据, 函数(k, arr){ $('#table tbody').append(' ' + k + ' ' + arr.Group + ' ' + arr.balance + ' ' + arr.description + ' '); }); }); });
我使用了上面的代码并且工作正常。感谢您的帮助
没问题，我会更改答案以反映这一点。干得好！

【解决方案2】：

使用 jQuery 你可以做这样的事情：

HTML：

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

jQuery 代码（它适用于您的 json 数组中有多少哈希）：

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] );
   }
}

【讨论】：