couldnt render json object got from api using ember data

Question

I am building an ember app which should send request to servlet and get the json response and display it. I tried it with ember data and the request is sent also the servlet is sending the right json response which I verified by printing in the console yet the ember couldnt render it.. it says router_js.js:1277 Uncaught (in promise) Error: More context objects were passed than there are dynamic segments for the route: error*

the json data that is received from the servlet

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'}

my route code

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');
  }
}

my model code

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

my adapter code:

import DS from 'ember-data';

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

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

and my handlebar code

inside My


{{outlet}}

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

my serializer code

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);
  },
});

Answer 1

It seems that ember is expecting an 'id' field in every json that it returns and since my json has only 'ID' and not 'id' it pops this error and also i found that after ember 3.6 there is a bug in ember that shows wrong error of 'more context should be passed' instead of the actual error. When i changed from 'ID' to 'id' it worked

Answer 2

router_js.js:1277 Uncaught (in promise) Error: More context objects were passed than there are dynamic segments for the route: error*

This error indicates you are passing objects to the <LinkTo /> component but your route does not include a dynamic segment or does not contain as many dynamic segments as objects you are passing.

Further, the default behavior of routes is to attempt to serialize your model into something usable for the url. It does this by looking at any dynamic param segment names and checking for properties of the same on the objects returned by the model hook or passed to the LinkTo component.

The error here honestly has nothing to do with EmberData or normalization. Likely what occurred was by not normalizing your data correctly you were passing something to a route that did not conform to the route handler's specification.

I think a key thing the ember-data docs need to focus on is serialization for custom formats, like what you have. always room to improve tho

The docs honestly can't be any clearer than they are, they give you the exact spec for what you need to transform to: https://api.emberjs.com/ember-data/4.6/classes/MinimumSerializerInterface/methods/normalizeResponse?anchor=normalizeResponse