Javascript 使用jQuery迭代JSON对象

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

我的控制器

@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;
}

上面的列表包含两行

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

当我在jquery中迭代它时，所有的值都被迭代为行，我真的希望在ajax成功函数中以逐行的方式显示列表

我的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>

$.ajax({
类型：“POST”，
contentType:'application/json；charset=utf-8'，
数据类型：'json'，
url:'getItemsByWorksite'，
数据：JSON.stringify（），
成功：函数（json）
{警报（json）
tr=$（''）；
tr.append（“项目名称”）；
tr.append（“数量”）；
tr.append（“单价”）；
$（“#表#u项”）。追加（tr）；
$.each（json，函数（i，项）
{
tr=$（''）；
tr.append（“+项[0]+”）；
tr.append（“+项目[1]+”）；
tr.append（“+项目[2]+”）；
$（“#表#u项”）。追加（tr）；
});
}

您可以为此使用

JSONObject（）

对象。通过此操作，您可以创建关联json数组。请在控制器中尝试下面的代码

@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;
}

---

很高兴我能帮助你……：）

@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;
}

$.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);
});