How to iterate over array of objects in ReactTable so as to display the data?

Question

Reactjs: I have been trying to build a ReactTable(npm ) from axios get request.The response data is in object of array format. So I can't populate my table .I am getting type-error : UN-handled Rejection (TypeError): resolvedData.map is not a function. I am aware the react table map cannot map over array of objects .I don't know how to map over and populate the table.

My axios.get request

    componentDidMount(){
        const url="http://localhost:5000/api/users/tenantView";
        fetch (url,{
            method: "GET"
        }).then(response=> response.json()).then(usersList=>{
           console.log((usersList)) ;
           this.setState({
            usersList : usersList
           });            
        })
  }

Here I am seeing the response in console,the data is being fetched correctly

{user: Array(5)}
user: Array(5)
0: {_id: "5d36f73f67665a1740620f55", name: "Pritam Kumar", email: "[email protected]", password: "$2a$10$ly84W9WLQr/Qih/AzN0PuOExctk5ohR9TxjtT.PUdsy4h6a9sY6pW", location: "Pune", …}
1: {_id: "5d36fc9c30ddd31638192498", name: "Raja", email: "[email protected]", password: "$2a$10$KC5i6EkDb5SIqaMQPh.RoumQON6PEYZIDE4TM1oTH6xhmOTaD.FOy", location: "Durgapur", …}
2: {_id: "5d3ac84a86688123789e13b2", name: "Puja", email: "[email protected]", password: "$2a$10$r17zOU1gTJvwoB.nBdRvi.qvDmsJhIlHbp//s8l0KEKgCEvbKoZAu", location: "Delhi", …}
3: {_id: "5d400d8f23eda427b0c020e0", name: "Goobi", email: "[email protected]", password: "$2a$10$sW/Cs32ouY2ZBPQ0sQK7YeRUNkdRfjucf/Y4ykiPbZRtXn49rm1rm", location: "Durgapur", …}
4: {_id: "5d492a271294110f64196b2c", name: "Imran", email: "[email protected]", password: "$2a$10$V5KWD60GrV1eNuOkDtTHVu9SjA2k6gshmwzWieYzJpus3fwhPWnbu", location: "Durgapur", …}
length: 5
__proto__: Array(0)
__proto__: Object

I have tried to map over by similar to this link but its not working React: Iterate over object, find array, and display array items

I have also tried to map in accessor like in react-table iterating over object array to print values in a column

I may be incorrect. Please have a look.Will these work ?

Render function

render() {
        const columns =[
            {

                Header:"User ID",
                accessor:"_id",
                sortable: false,
                filterable: false,
                style:{
                    textAlign: "left"
                },
                width: 100,
                maxWidth: 100,
                minWidth: 100,
            },
            {
                Header:"Name ",
                accessor:"name",
                filterable: false,

            },
            {

                Header:"Email",
                accessor:"email"
            },
            {

                Header:"Password",
                accessor:"password"
            },
            {

                Header:"Farm",
                accessor:"farm"
            },

        ]
       return(
           <ReactTable
           columns={columns}
           data={this.state.usersList}
           defaultPageSize={20}
           >

           </ReactTable>

       );
    }
}

Populate the table: No data is populated now.

try this.state.usersList.user it looks like the data lives there. — jsw324
– jsw324, Commented Oct 30, 2019 at 13:05
Does React table is able to map over array of objects because the axios request is returning me with {user:Array(5)} — user5140792
– user5140792, Commented Nov 6, 2019 at 7:08

konradwww · Accepted Answer · 2019-10-30 13:08:25Z

0

You are passing object instead of array. Just pass the data like that:

<ReactTable
               columns={columns}
               data={this.state.usersList.user}
               defaultPageSize={20}
>

answered Oct 30, 2019 at 13:08

konradwww

6917 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5140792 Over a year ago

I have tried this but this seems not to work, the fields are still empty while in console I can see the o/p.

score 0 · Accepted Answer · 2019-11-06 08:47:31Z

There are several things to remember while handling with React Table.I was working today on this code and found out that resolvedData.map function of React Table can iterate over arrays or [{}] but not {}
React Table cannot iterate over objects by default.
1. My backend main code where I found error ,
  the response was encapsulated with user object format , I changed it by removing { } ,then my response was in [{ }] where [ ] was missing
  code:
  await User.find( ).lean(true).then(user => {return res.send(user);... //here
2. After that my code started working,the resolvedData.map function of React Table could display list of all users in my Database by without the use of this.state.userList.user.
  If I bind the response in res.send({user}) then also the default map function doesn't work on {}.My response was missing [{data}] rather it was returning {[ ]}
  Thank you all for helping.

Collectives™ on Stack Overflow

How to iterate over array of objects in ReactTable so as to display the data?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related