解析 json 条目列表并在 html 中显示垂直填充答案

【问题标题】：parsing json list of entry and display in html populating vertically解析 json 条目列表并在 html 中显示垂直填充
【发布时间】：2017-06-18 11:57:42
【问题描述】：

我从下面的代码中得到 List> 作为 json 响应

    @RequestMapping(value="/responseString", method = RequestMethod.POST)
@ResponseBody
    public String responseString(HttpServletRequest request) throws Exception {
        try{
List<Entry<String, Integer>> result =  Util.topNKeys(Util.getvalues(resultSet, 2), 3);
            return JSONSerializer.toJSON(result).toString();
        } catch(Exception e) {
}}

通过调用ajax调用，

$.ajax({
                    type: 'POST',
                    url: '<%=request.
getContextPath()%>/responseString',
                    data: ({batchId: batchId, clientId:clientId}),
success: function(data) {   
                var listEntryData = jQuery.parseJSON(data);
error: function(xhr, textStatus, error){
                alert("Error occured. Please try after some time.");
            }
        });

我得到以下回应

[it help me=1, is a good=1, how to spend=2, like myself it=3, my mo ey=4, people like myself=5, me to understa=6, understa d how=7]

我想像下面这样显示它

   it help me: 1   how to spend: 2    my mo ey=4             me to understa: 6
   is a good: 1    like myself it: 3  people like myself: 5  understa d how: 7

内容的显示必须：

1.)人口必须垂直从上到下，左对齐

2.)它必须有 4 列和 4 行取决于内容，即如果数据计数是 14. 它应该有 4 行。

请帮帮我。

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

我建议您尝试使用 getJSON 方法来检索 json 数据。就这样吧……

$.getJSON("<%=request.getContextPath()%>/responseString",{batchId: batclientId:clientId},function(data){
      if (data){
         $.each(data , function(){
            $("#block").append('<div class="col-md-3">'+this['key1']+' : '+this['key2']+'</div>');
            });
      }
      else{
         alert("Error occured. Please try after some time.");
      }
   });

并将id为#block和class .row的div放在你想显示这些数据的地方。

<div id="block" class="row"></div>

我不确定 JSP 代码希望这对你有用...

【讨论】：