Ember Beginner - Problem with JSONAPIAdapter

Hi, I have the following problem.

I want to get data from a other server. the data is in json structure. If i access the url http://localhost:8085/v1/extension/dummy/widgets/totalOverviewWidget i get this: {"data":{"type":"totalOverviewWidget","id":"dashboard-extension-d468eba4-e90c-4de9-986d-cad1054a10c9-1","attributes":{"name":"test","numberOfSystems":1,"numberOfNodes":2,"numberOfApplications":1}}}

i want this data now in ember… i created a Model like this:

   ` //modelname: totalOverviewWidget`
        import DS from 'ember-data';
        const { Model } = DS;

    export default Model.extend({
    	name: DS.attr(),
    	numberOfSystems: DS.attr(),
    	numberOfNodes: DS.attr(),
    	numberOfApplications: DS.attr()
    });

now i tried to get the data like this from the server: this.store.query(‘totalOverviewWidget’, {});

the error i get is this: http://localhost:8085/v1/extension/dummy/widgets/total-overview-widgets 404 (Not Found)

everytime i use like query or findRecord etc it puts a “s” at the end of the url and it cant find my data.

What is the best way to get the data from that other server to display it later on my website ?

(In obiwan) Hello There!

I think you want pathForType: https://guides.emberjs.com/release/models/customizing-adapters/#toc_path-customization

(thanks to @linearza in discord for helping me find this)

1 Like

ty for your help! it worked now but i still have an issue to access the data. maybe i understood something wrong…

  return this.store.queryRecord('totaloverviewwidget', {}).then(function(totaloverviewwidget) {
      let name = totaloverviewwidget.get('name');
      let numberOfSystems = totaloverviewwidget.get('numberOfSystems');
      let numberOfNodes = totaloverviewwidget.get('numberOfNodes');
      let numberOfApplications = totaloverviewwidget.get('numberOfApplications');

      console.log(`Name: ${name}`);
      console.log(`numberOfSystems: ${numberOfSystems}`);
      console.log(`numberOfNodes: ${numberOfNodes}`);
      console.log(`numberOfApplications: ${numberOfApplications}`);
    });

if i use this, i get the data in the console log. but if i try to access the data in the .hbs file with {{model.totaloverviewwidget.name}}

i get nothing. model.name and other stuff i tried didnt work either. how i get the stored data now into my hbs file ?

Let’s say you have a model hook like this:

model(params) {
  return this.store.queryRecord('totaloverviewwidget', {});
}

This will automagically inject the “model” onto the controller, but you’ve just returned a single unnamed record (the results of queryRecord) from the model, so if you wanted to access it in the template you’d need to use just “model”, not “model.totaloverviewwidget”, so in your case just: {{model.name}}.

If you want to name your model hook items I’d recommend using the RSVP.hash helper like so:

import Route from '@ember/routing/route';
import { hash } from 'rsvp';

export default Route.extend({
  model(params) {
    return hash({
      totaloverviewwidget: this.store.queryRecord('totaloverviewwidget', {}),
      foo: this.store.findRecord('foo', params.fooId),
      bars: this.store.findAll('bar')
    });
  }
});

Then you can reference in your template like this:

{{model.totaloverviewwidget.name}}
{{#each model.bars as |bar|}}
  {{bar.type}} - {{bar.brand}}
{{/each}}
{{model.foo.fakeAttributeName}}

etc…

1 Like