在SSM项目中以JSON格式将数据返回给前端，前端该怎么接收和渲染

Question

问题相关代码，请勿粘贴截图

controller

 @RequestMapping("/findByUserId")
    @ResponseBody
    public String findByUserId(int id) throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        List<Complain> list = new ArrayList<Complain>();
        list = complainService.findByUserId(id);
        return mapper.writeValueAsString(list);
    }

前端

<script>
        $(function (){
            $("#btn").click(function (){
                $.post("${pageContext.request.contextPath}/complain/findByUserId?id=${sessionScope.user.id}",function (data){
                    var str = "";
                    for (let i =0;i<data.length;i++){
                        str+="<tr>"+
                            "<td>"+data[i].id+"</td>"+
                            "<td>"+data[i].complain_content+"</td>"+
                            "<td>"+data[i].creat_time+"</td>"+
                            // "<td>"+data[i].user.name+"</td>"+
                            // "<td>"+data[i].user.phone+"</td>"+
                            "<td>"+data[i].state+"</td>"+
                            "<td>"+data[i].admin+"</td>"+
                            "<td>"+data[i].reply_time+"</td>"+
                            "<td><a href=/complain/deleteById?id=data[i].id>删除</a></td>"+
                            "</tr>"
                    }
                    $("#show_tbody").html(str)
                })
            })
        })
    </script>

运行结果及报错内容

这是查询到的数据

这是运行结果

我想要达到的结果

将需要的信息从两张表查询后的结果中取出并展示，望解答，谢谢

Answer 1

需要将json字符串转为数组。

<script>
        $(function (){
            $("#btn").click(function (){
                $.post("${pageContext.request.contextPath}/complain/findByUserId?id=${sessionScope.user.id}",function (data){
                    var str = "";
                    let arr=JSON.parse(data);
                    for (let i =0;i<arr.length;i++){
                        str+="<tr>"+
                            "<td>"+arr[i].id+"</td>"+
                            "<td>"+arr[i].complain_content+"</td>"+
                            "<td>"+arr[i].creat_time+"</td>"+
                            // "<td>"+arr[i].user.name+"</td>"+
                            // "<td>"+arr[i].user.phone+"</td>"+
                            "<td>"+arr[i].state+"</td>"+
                            "<td>"+arr[i].admin+"</td>"+
                            "<td>"+arr[i].reply_time+"</td>"+
                            "<td><a href=/complain/deleteById?id=arr[i].id>删除</a></td>"+
                            "</tr>"
                    }
                    $("#show_tbody").html(str)
                })
            })
        })
    </script>
 

Answer 2

你的代码快实现了，就是要把data先反序列化成json数组。如下所示：

let list = JSON.parse(data);
for(let i in list) {
    ....list[i].id....
    ....list[i].state....
}

Answer 3

将controller中6、7行对应的代码改为如下代码
list = complainService.findByUserId(id);
return list.toArray().toString();

Answer 4

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632