使用Ember Data无法渲染API返回JSON对象的问题求助

问题场景 #

构建Ember应用时，已成功向Servlet发送请求并获取到正确JSON响应，但页面无法渲染数据，控制台抛出上述错误。

接收的JSON数据 #

My: Array(7)
0: {CAPACITY: '2', PRICE: '1579', RTYPE: 'villa', ID: '5'}
1: {CAPACITY: '1', PRICE: '1526', RTYPE: 'villa', ID: '1'}
2: {CAPACITY: '4', PRICE: '1241', RTYPE: 'villa', ID: '6'}
3: {CAPACITY: '6', PRICE: '1500', RTYPE: 'villa', ID: '13'}

现有代码 #

Route代码（posts.js）

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class PostsRoute extends Route {
  @service store;
  model() {
    console.log(this.store.findAll('My'));
    return this.store.findAll('My');
  }
}

Model代码（My.js）

import Model from '@ember-data/model';
import DS from 'ember-data';
const { attr } = DS;
export default Model.extend({
  CAPACITY: attr('string'),
  RTYPE: attr('string'),
});

Adapter代码（application.js 或 My.js）

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'http://localhost:8080/hotelres',

  pathForType() {
    return 'My';
  },
});

Handlebars模板（my.hbs）

inside My


{{outlet}}

{{#each this.model as |my|}}
    <h1>{{my.CAPACITY}}</h1>
{{/each}}

Serializer代码（application.js 或 My.js）

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    console.log('control at serializer->post->normalize');
    payload = { My: payload };
    console.log(payload)
    return this._super(store, primaryModelClass, payload, id, requestType);
  },
});

修复步骤 #

1. 修正路由与模型的命名匹配问题 #

• 路由类命名为MyRoute，路由文件改为my.js，与模板、模型名称统一
• Route中store.findAll的参数改为小写'my'，符合Ember Data的命名规范：

  model() {
    return this.store.findAll('my');
  }
  

2. 调整Serializer适配数据格式 #

• 指定大写ID作为模型主键，匹配返回的JSON字段
• 调整payload的键名为小写my，对应模型名称：

  export default DS.RESTSerializer.extend({
    primaryKey: 'ID',
    normalizeResponse(store, primaryModelClass, payload, id, requestType) {
      payload = { my: payload.My };
      return this._super(store, primaryModelClass, payload, id, requestType);
    },
  });
  

3. 检查路由定义与跳转逻辑 #

报错的核心原因是跳转路由时传递了超出路由动态段数量的参数：

• 如果路由定义是this.route('my');（无动态段），跳转时不能用transitionTo('my', someObject)
• 若需要动态路由，需修改router.js为：

  Router.map(function() {
    this.route('my', { path: '/my/:my_id' });
  });
  

  再对应传递my_id参数

4. 模型与模板的一致性检查 #

• 模型文件名改为小写my.js（遵循Ember约定）
• 确保模板文件my.hbs对应my路由，循环逻辑中的属性名称与模型定义一致

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