store.findAll() is not working

Ember Data
1

My endpoint is http://localhost:8080/onlinefeedbacksystemFinal/questions

I am looking to display the all the questions from by backend. The store.findAll() requests and gets the response from the endpoint succcessfully but I am unable to print those responses.

question.js

import DS from 'ember-data';          //adapter
export default DS.JSONAPIAdapter.extend({

   host: 'http://localhost:8080',
   namespace: 'onlinefeedbacksystemFinal'

})

question.js

import Ember from 'ember';    //route model

export default Ember.Route.extend({
  model() {
    return this.store.findAll('question');
  }
});

question.js

import DS from 'ember-data';  //model

export default DS.Model.extend({

 qid:  DS.attr('number'),
 questionmessage: DS.attr('string'),
 question_type: DS.attr('number'),
 
});

question.hbs

{{page-title "Question"}}



<table align="center" cellpadding="5" cellspacing="5" border="1">
{{#each model as |question|}}

<tr>
  <td>{{question.qid}}</td>
  <td>{{question.questionmessage}}</td>
</tr>

{{/each}}
</table>

I sent the response to ember in this format [{"question_type":1,"qid":131,"questionmessage":"How was our service"},{"question_type":2,"qid":132,"questionmessage":"Will you visit again"}]

2

Hi @hari_s18, when you say “unable to print those responses” could you be a little more specific? Are there any errors in the javascript console? Is it not rendering some/all of the data? You could try to throw a {{log question}} in above the <tr> tag in your template and check the console to make sure the questions records are “making it” to the template correctly. You could also put a {{log model}} in above the table.

If those don’t look right the problem is probably more in the data/routing layer, but if they do then you can inspect the records to see why the template isn’t rendering how you expect.

1 Like
3

Hi @dknutsen, As you mentioned above I have did {{log model}} , the console gave this informations

Class {modelName: "question", content: Array(0), store: Store, isLoaded: true, manager: RecordArrayManager, …}
arrangedContent: (...)
content: []
isLoaded: true
isUpdating: false
manager: RecordArrayManager {store: Store, isDestroying: false, isDestroyed: false, _liveRecordArrays: {…}, _pendingIdentifiers: {…}, …}
modelName: "question"
store: Store {_backburner: Backburner, recordArrayManager: RecordArrayManager, _notificationManager: undefined, _adapterCache: {…}, _serializerCache: {…}, …}
type: (...)
Symbol(INIT_FACTORY): undefined
Symbol(OWNER): undefined
_arrTag: MonomorphicTagImpl {revision: 1, lastChecked: 6, lastValue: 1, isUpdating: false, subtag: Array(2), …}
_arrangedContent: []
_arrangedContentIsUpdating: false
_arrangedContentRevision: 1
_arrangedContentTag: MonomorphicTagImpl {revision: 1, lastChecked: 6, lastValue: 1, isUpdating: false, subtag: MonomorphicTagImpl, …}
_getDeprecatedEventedInfo: () => `RecordArray containing ${this.modelName}`
_length: 0
_lengthDirty: false
_lengthTag: MonomorphicTagImpl {revision: 1, lastChecked: 6, lastValue: 1, isUpdating: false, subtag: Array(2), …}
_objects: null
_objectsDirtyIndex: 0
_super: Ć’ ()
_updatingPromise: null
[]: (...)
firstObject: (...)
hasArrayObservers: (...)
isDestroyed: (...)
isDestroying: (...)
lastObject: (...)
length: (...)
_debugContainerKey: (...)
__proto__: ArrayProxy
4

Ah ok it looks like there are no results being serialized (Array(0)) so my guess is you have a serialization issue.

That said I see that you’re using the JSONAPIAdapter (so presumably you’re using JSONAPISerializer) but the JSON you posted isn’t in JSON:API format, so it’s probably normalizing the data improperly which causes you to get an “empty” model even though there are results.

If you want to use JSON:API format you would want to change your backend to render JSON:API (probably using a library). But assuming you don’t want to modify your API at all I would recommend extending JSONSerializer and JSONAdapter for your application serializer and adapter, respectively. It’s confusing that there is JSONAdapter and JSONAPIAdapter and they’re fairly different, but JSONAdapter is the most “basic” in terms of what it expects and I think it would match your payloads most easily. This would be the lowest-effort way to handle your API format. You could also keep JSON:API adapter/serializer but you’ll have to write some code to normalize the responses from your API format to JSON:API format

1 Like
5

Ok, then what would be the code for the JSONAdapter. I can see only JSONAPIAdapter on the internet. Can you modify these code for JSONAdapter because I am new to emberJS I am still in my learning phase. Thanks in advance :smiley:

import DS from 'ember-data';          //adapter
export default DS.JSONAPIAdapter.extend({

   host: 'http://localhost:8080',
   namespace: 'onlinefeedbacksystemFinal'

})
6

All you need to do in this case is change this line:

export default DS.JSONAPIAdapter.extend({

to this:

export default DS.JSONAdapter.extend({

More important for your issue will be the serializer. You should also extend the JSONSerializer either for your question model or at the application level.

For further information and examples (this is assuming you’re on latest Ember but you can select a different version if you’re on older Ember):

3 Likes