如何在Ember.js中渲染Java Servlet返回的全部JSON数组数据

核心问题分析 #

你的Java Servlet当前返回的是多行独立的JSON对象，不符合标准JSON数组格式，导致jQuery解析后得到的是带数字索引键的对象（而非真正的数组）；同时Handlebars模板使用{{#each-in}}遍历整个对象，无法正确渲染多行数据。

解决方案步骤 #

1. 修正服务器返回的JSON格式（推荐） #

将Servlet返回内容修改为标准JSON数组，用[]包裹所有对象，对象间用逗号分隔：

[
  {"CAPACITY":"4","PRICE":"918","RTYPE":"basic","ID":"4"},
  {"CAPACITY":"2","PRICE":"885","RTYPE":"villa","ID":"8"},
  {"CAPACITY":"2","PRICE":"1579","RTYPE":"villa","ID":"5"},
  {"CAPACITY":"1","PRICE":"1526","RTYPE":"villa","ID":"1"}
]

2. 修改Ember控制器代码 #

将AJAX请求从计算属性移到初始化钩子中，避免重复请求，并将数据赋值为数组：

export default class RoomselectController extends Controller {
    @service router;
    @tracked rooms = []; // 初始化为空数组
    @tracked price = 0;

    init() {
        super.init(...arguments);
        this.fetchRooms();
    }

    fetchRooms() {
        const mobile = "123123123";
        $.ajax({
            url: 'My',
            method: 'GET',
            dataType: 'json',
            data: { mobile: mobile },
            success: (response) => {
                console.log(response);
                if (response.length > 0) {
                    this.price = response[0].PRICE;
                }
                this.rooms = response; // 直接赋值数组
            },
            error: (xhr, status, error) => {
                const errorMessage = `${xhr.status}: ${xhr.statusText}`;
                alert(`error ${errorMessage}`);
            }
        });
    }
}

3. 修改Handlebars模板 #

使用{{#each}}遍历数组，为每个房间对象生成一行表格：

<table border="1">
    <tr>
        <td><b>Capacity</b></td>
        <td><b>Price</b></td>
        <td><b>Room Type</b></td>
        <td><b>Room No</b></td>
    </tr>

    {{#each this.rooms as |room|}}
    <tr>
        <td>{{room.CAPACITY}}</td>
        <td>{{room.PRICE}}</td>
        <td>{{room.RTYPE}}</td>
        <td>{{room.ID}}</td>
    </tr>
    {{/each}}
</table>

临时兼容方案（无法修改Servlet时） #

如果暂时无法调整服务器返回格式，可在前端手动解析响应文本，将多行JSON对象转为数组：
修改控制器的fetchRooms方法：

fetchRooms() {
    const mobile = "123123123";
    $.ajax({
        url: 'My',
        method: 'GET',
        dataType: 'text', // 禁用自动JSON解析
        data: { mobile: mobile },
        success: (responseText) => {
            // 分割行、过滤空行、逐个解析JSON
            const rooms = responseText.split('\n')
                .filter(line => line.trim() !== '')
                .map(line => JSON.parse(line));
            
            console.log(rooms);
            if (rooms.length > 0) {
                this.price = rooms[0].PRICE;
            }
            this.rooms = rooms;
        },
        error: (xhr, status, error) => {
            const errorMessage = `${xhr.status}: ${xhr.statusText}`;
            alert(`error ${errorMessage}`);
        }
    });
}

模板代码保持不变即可。

内容的提问来源于stack exchange，提问作者hariharan baskaran