javascript - 使用 jQuery 迭代 JSON 对象

Question

我创建了一个包含一些不同数据类型的列表

我的 Controller

@RequestMapping(value="/getItemsByWorksite",method={RequestMethod.POST,RequestMethod.GET})
    public @ResponseBody
    List  getItemsByWorksite(HttpServletRequest request, HttpServletResponse response)
    {

                            List json_data = new ArrayList<>();

                            /////for loop

                            json_data.add(item_name);
                            json_data.add(single_qty);
                            json_data.add(total_unit_price);

                            ///// for loop ends   

                            System.out.println(json_data);
                            return json_data;
}

System.out.println结果

[["Cement"],10,266.6666666666667,["Cement"],20,533.3333333333334]

上面的列表包含两行

row 1 ["Cement"],10,266.6666666666667
row 2 ["Cement"],20,533.3333333333334

当我在 jquery 中迭代它时，所有值都作为行迭代，我真的想在 ajax success 函数中逐行显示列表

我的ajax函数

    $.ajax({

                type: "POST",
                contentType: 'application/json;charset=utf-8',
                dataType:'json',
                url: 'getItemsByWorksite',
                data: JSON.stringify(),
                success: function(json)
                { alert(json)

                    tr = $('<tr/>');

                    tr.append("<th>Item Name</th>");
                    tr.append("<th>Quantity</th>");
                    tr.append("<th>Unit Price</th>");
                    $('#table_items').append(tr);
                     $.each(json,function(i,item)
                          {
                           tr = $('<tr/>');
                           tr.append("<td>"+item[0]+"<td>);   
                           tr.append("<td>"+item[1]+"<td>);
                           tr.append("<td>"+item[2]+"<td>);

                           $('#table_items').append(tr);

                          });
                }

<table id="table_items"></table>

Answer 1

您可以使用 JSONObject() 对象来实现此目的。通过这个你可以创建关联的 json 数组。在您的 Controller 中尝试以下代码。

@RequestMapping(value="/getItemsByWorksite",method={RequestMethod.POST,RequestMethod.GET})
    public @ResponseBody
    List  getItemsByWorksite(HttpServletRequest request, HttpServletResponse response)
    {
        List jsonList = new ArrayList<>();
        /////for loop
        JSONObject json_data = new JSONObject();
        json_data.put("item_name",item_name);
        json_data.put("single_qty",single_qty);
        json_data.put("total_unit_price",total_unit_price);
        jsonList.add(json_data);
        ///// for loop ends   
        System.out.println(jsonList);
        return jsonList;
}

你的 javascript each() 函数将如下所示，

$.each(json,function(i,item){
    tr = $('<tr/>');
    tr.append("<td>"+item.item_name+"<td>");
    tr.append("<td>"+item.single_qty+"<td>");
    tr.append("<td>"+item.total_unit_price+"<td>");
    $('#table_items').append(tr);
});