如何在JSP页面展示JSON列表？及对应JavaScript循环实现方法

1. 如何在JSP页面中展示JSON列表？ #

通常有两种主流实现方式，一种是后端解析JSON后通过JSP标签渲染，另一种是前端直接用JavaScript处理JSON数据，我分别给你拆解：

方式一：后端解析+JSTL循环渲染 #

如果你的JSON数据是从后端接口获取的，建议先把它解析成Java对象集合，再传到JSP页面用JSTL标签循环展示，这样更符合Java Web的传统开发模式：

1. 后端步骤（示例用Jackson解析JSON）：

// 假设你拿到的JSON字符串
String jsonStr = "[{\"id\": 8, \"book_name\": \"sasdas\", \"book_author\": \"asdas\", \"book_price\": 66},{\"id\": 9, \"book_name\": \"abhishek\", \"book_author\": \"asd\", \"book_price\": 49898},{\"id\": 10, \"book_name\": \"dasd\", \"book_author\": \"asa\", \"book_price\": 2121}]";

// 用Jackson解析成List<Book>（Book是自定义实体类，对应JSON字段）
ObjectMapper objectMapper = new ObjectMapper();
List<Book> bookList = objectMapper.readValue(jsonStr, new TypeReference<List<Book>>() {});

// 把集合存入request域，传给JSP
request.setAttribute("bookList", bookList);
request.getRequestDispatcher("/books.jsp").forward(request, response);

2. JSP页面代码（需要引入JSTL标签库）：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>书籍列表</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
        </tr>
        <!-- 用JSTL的forEach循环遍历集合 -->
        <c:forEach items="${bookList}" var="book">
            <tr>
                <td>${book.id}</td>
                <td>${book.bookName}</td>
                <td>${book.bookAuthor}</td>
                <td>${book.bookPrice}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

方式二：前端JavaScript直接处理JSON #

如果JSON数据是通过AJAX获取，或者后端直接把JSON输出到页面的script标签里，那可以用JavaScript循环来动态生成HTML元素展示。

2. 针对指定JSON数据编写JavaScript循环 #

首先要纠正一下你给的JSON格式，正确的数组格式应该是这样的（键名要加双引号，数组元素直接用逗号分隔）：

[
    {"id": 8, "book_name": "sasdas", "book_author": "asdas", "book_price": 66},
    {"id": 9, "book_name": "abhishek", "book_author": "asd", "book_price": 49898},
    {"id": 10, "book_name": "dasd", "book_author": "asa", "book_price": 2121}
]

下面给你几种常用的JavaScript循环写法，都能实现列表展示：

写法一：forEach循环（最简洁） #

<!DOCTYPE html>
<html>
<head>
    <title>书籍列表</title>
</head>
<body>
    <div id="bookList"></div>

    <script>
        // 定义JSON数据
        const books = [
            {"id": 8, "book_name": "sasdas", "book_author": "asdas", "book_price": 66},
            {"id": 9, "book_name": "abhishek", "book_author": "asd", "book_price": 49898},
            {"id": 10, "book_name": "dasd", "book_author": "asa", "book_price": 2121}
        ];

        const bookListDiv = document.getElementById('bookList');
        // 创建表格元素
        const table = document.createElement('table');
        table.border = "1";
        // 添加表头
        const headerRow = document.createElement('tr');
        headerRow.innerHTML = "<th>ID</th><th>书名</th><th>作者</th><th>价格</th>";
        table.appendChild(headerRow);

        // forEach循环遍历JSON数组
        books.forEach(book => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${book.id}</td>
                <td>${book.book_name}</td>
                <td>${book.book_author}</td>
                <td>${book.book_price}</td>
            `;
            table.appendChild(row);
        });

        // 把表格添加到页面
        bookListDiv.appendChild(table);
    </script>
</body>
</html>

写法二：传统for循环（兼容旧浏览器） #

如果需要兼容一些不支持ES6的旧浏览器，可以用传统的for循环：

// 替换上面的forEach部分
for(let i = 0; i < books.length; i++) {
    const book = books[i];
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${book.id}</td>
        <td>${book.book_name}</td>
        <td>${book.book_author}</td>
        <td>${book.book_price}</td>
    `;
    table.appendChild(row);
}

写法三：for...of循环（ES6+） #

这也是ES6之后的语法，写法更直观：

// 替换forEach部分
for(const book of books) {
    const row = document.createElement('tr');
    row.innerHTML = `
        <td>${book.id}</td>
        <td>${book.book_name}</td>
        <td>${book.book_author}</td>
        <td>${book.book_price}</td>
    `;
    table.appendChild(row);
}

内容的提问来源于stack exchange，提问作者Abhishek Patel