Ember JS FindAll returns undefined data-CodePudding

iam currently developing a contact management system web app using ember js for the front end .Iam using ember store for fetching the data from the api , while fetching json data using store.findAll() , iam getting the json array with the length of data as expected but when i try to access the data at a specific position in the json array it gives undefined value , it is not giving the model value.I have checked everything like json format , naming conventions with respect to my serializer but cant able to find what is going wrong , can anyone help me with solving this ?

Application adapter :

import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
    buildURL(...args) {
      return "http://localhost:8082/ContactManagementSystem1/api/contact/5";
    }
    headers = {
        'Accept': '*/*',
      };
}

Json response from api :

[
    {
        "firstName": "Example",
        "lastName": "K",
        "deletedAt": "",
        "mobileNumberHome": "7827382738",
        "companyName": "Example",
        "dateOfBirth": "2000-04-12",
        "id": 21,
        "userId": 4,
        "mobileNumberWork": "2738273788",
        "email": "[email protected]"
    },
    {
        "firstName": "nameexample2",
        "lastName": "p",
        "deletedAt": "",
        "mobileNumberHome": "8989898996",
        "companyName": "Business ",
        "imageURL": "actress1.jfif",
        "dateOfBirth": "2021-10-05",
        "id": 51,
        "userId": 4,
        "mobileNumberWork": "8667889896",
        "email": "[email protected]"
    }
]

Serializer :

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
    normalizeResponse(store, primaryModelClass,payload,id,requestType){
        arguments[2] = {
            "contacts" : payload
        }
        return this._super(...arguments);
    }
});

Since my json response is different from the RestSerializer format i have written some code in the serializer for normalising the response.

Route where i fetch data using store.findAll()

import Route from '@ember/routing/route';
import {inject as Service } from '@ember/service';
export default class UserContactRoute extends Route {
  @Service store;
  async model() {
    return this.store.findAll('contact');
  }
}

These are codes which i have used , i have also checked in the inspect's console no error is been thrown , the problem is model array object were undefined.

CodePudding user response：

One should use the objectAt(index) for accessing array elements because those arrays are not regular JS ones. See here:

It's important to note that RecordArray is not a JavaScript array, it's an object that implements MutableArray. This is important because, for example, if you want to retrieve records by index, the [] notation will not work--you'll have to use objectAt(index) instead.