Error while displaying a resource list: newRecords.map is not a function

Question

When trying to parse a list of customers, the execution stops when fetching the json-response. I checked my API with Postman and all the data is returned as expected. I use the following code for authenticating with JWT

export default (type, params) => {
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const request = new Request('http://localhost:4000/api/auth/login', {
        method: 'POST',
        body: JSON.stringify({ username, password }),
        headers: new Headers({ 'Content-Type': 'application/json' }),
    });

    return fetch(request)
        .then(response => {
            if (response.status < 200 || response.status >= 300) {
                throw new Error(response.statusText);
            }
            return response.json();
        })
        .then(({ user }) => {
            localStorage.setItem('token', user.jwt);
        });

I use the authentication in the simplerest-client and I get the correct response.

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Token ${token}`);
    return fetchUtils.fetchJson(url, options);
}
const restClient = simpleRestClient('http://localhost:4000/api', httpClient);

export default (type, resource, params) =>
    new Promise(resolve => setTimeout(() => resolve(restClient(type, resource, params)), 500));

I added the content-range header (content-range →index 0-24/2) and my JSON-Response is:

{
"customers": [
    {
        "phone": "+1 39939311",
        "last_name": "Test",
        "join_date": "2017-05-17",
        "is_active": false,
        "id": 1,
        "first_name": "Ein",
        "email": "test@bla.com",
        "birth_date": "1990-04-01",
    },
    {
        "phone": "+44 88382832",
        "last_name": "Fünf",
        "join_date": "2017-01-01",
        "is_active": false,
        "id": 2,
        "first_name": "Testen",
        "email": "check@tester.org",
        "birth_date": "1987-06-02",
    }
]}

I get the following error message:

uncaught at handleFetch TypeError: newRecords.map is not a function

Does anybody have an idea, what I am doing wrong?

score 0 · Answer 1 · answered May 18 '18 at 01:24

I figured this out with a little debugging. The simpleRestClient expects your JSON response to be an array, not an object with a data array inside of it. It's complaining that newRecords.map is not a function because the JS Object type does not have a map function like an Array does.

So you have two options:

Modify your API to return an array at the top level.
Modify simpleRestClient or just create your own client/data provider for react-admin/admin-on-rest to use. You can then define it such that it handles the records being returned in an array within the response. In my case, there was a property named data that contained the array; in your case, it's customers.

Error while displaying a resource list: newRecords.map is not a function

1 Answers1