React-admin: Unable to import Json data from Nodejs

user_7288928 0
Viewed 271
    {
    "repdata": [
      {
          "id": "1",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "VasaviMeds",
          "customer pincode": "4343434",
          "customer phone": "11111111",
          "phone": "1212121212"
      },
      {
          "id": "2",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "MegaMeds",
          "customer pincode": "4343434",
          "customer phone": "22222222",
          "phone": "1212121212"
    }]}

This is my sample response on localhost:5000/api/ using Nodejs. I've hardcoded the json data in my nodejs file. I'm trying to extract this JSON data in my react-admin dashboard, but unable to do it. Here's my react code snippet:

import React from 'react';
import { Admin, Resource, ListGuesser, EditGuesser } from 'react-admin';
import { UserList} from './users';
import { UserCreate} from './userCreate';
import jsonServerProvider from 'ra-data-json-server';
//import { CommentList } from './comments';

const dataProvider = jsonServerProvider('localhost:5000/api');

function App() {
  return(
      <Admin title="dashboard" dataProvider={dataProvider}>
        <Resource name="repdata" list={UserList} edit={EditGuesser} create={UserCreate}/>        
      </Admin>
  )
}

export default App;

Can anyone help how to perfectly connect the nodeJs and React-admin?

react-admin reactjs node.js json
2 Answers

Well I think you wanna make React SSR based app, IF yes then you should choose Nextjs with react which is really great, otherwise you will find many issues in future, well for this I feel this should Promises issue on serverside do these steps.

  1. check if you getting request on node.
  2. add promises on your node request.
user_31138990

Here, you are using jsonServerProvider as your data provider. jsonServerProvider follows JSONPlaceholder dialect, ie, for all LIST api call, the data provider expects the data to be in the form,

[
      {
          "id": "1",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "VasaviMeds",
          "customer pincode": "4343434",
          "customer phone": "11111111",
          "phone": "1212121212"
      },
      {
          "id": "2",
          "name": "Nikhil Garakapati",
          "username": "Nikhil",
          "email": "nikhil@gmail.com",
          "representative region": "ANDHRA PRADESH",
          "representative hq": "Chittor",
          "representative area": "Chittor",
          "customer name": "MegaMeds",
          "customer pincode": "4343434",
          "customer phone": "22222222",
          "phone": "1212121212"
    }
]

Additionally, the header must contain a field called X-Total-Count with a value corresponding to the total number of records, without applying the limit. For example, in your case, let's say the resource repdata has 50 records that meet query condition but returns only 10 records as per pagination. Then X-Total-Count value is used to determine the content range.

Its always better to use a custom data provider which suits your API. Please refer the react-admin docs for info

user_75215030
Related