4

Actually i am fetching data from an API every thing is working quite well but when i fetch array of array then its giving error of undefined..How should i solve this.Any help will be appreciated..Thanks in advance..

This is the response i am getting from an api..

{data: Array(10), meta: {…}}
data: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
meta: {message: "Rider's list fetched successfully.", page: 1, per_page: 10, total: 134}
__proto__: Object

And i wanted to fetch total from the 'meta'..I have stored response in state called data ..And when i put console.log(this.state.data.meta.total) its giving me error like:-Cannot read property 'total' of undefined

Improve this question
3
  • check in api call response first, are you getting data Commented Sep 26, 2019 at 4:56
  • yes i am getting data..See i have wrote response..above.. Commented Sep 26, 2019 at 4:57
  • @tarzenchugh I am storing whole response in state called data..So my data state has two objects called data and meta....so know how can i access total from meta.. Commented Sep 26, 2019 at 5:00

2 Answers 2

Reset to default
2

Atin Singh answer will work, though it does take the full response object.

Have a look at object destructuring to pull only the values you want. If you want to store them in a single variable, all you need to do is add them to an object. When it comes to state though, the flatter the better. 

const {data, meta: {total}} = response;
setState({data: {data, total});

You can now access the total with this.state.data.total

Note: You might want to change the name of the state property data to something else, otherwise you'll have to access it like this.state.data.data which is weird...

Or rename the returned data array to something more descriptive than just data. For example, if its an array of people, you could do something like:

const {data: people, meta: {total}} = response
setState({data: {people, total});

// this.state.data.people = [{...}, {...}, {...}]
// this.state.data.total = 134

Remember, state updates may be asynchronous, so don't just console out after setting the state as this might give you a false negative

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

3 Comments

sorry for asking this silly question but where should i write const?? cause i ll get my response from fetch function.. please help..
Not a silly question at all. Add that const right before you set the state. All you are really doing here is pulling the data you are looking for into new variables. So depending on how you are using fetch, something like this might work fetch("apiAddress").then(response => response.json()).then(response => { const {data: people, meta: {total}} = response; setState({data: {people, total}); Hope that helps!
Glad to hear it! Best of luck with the rest of your app
1

I would suggest something like this

state = {data:[], meta:{}}

after fetching do

this.setState({data: response.data, response.meta}) //if you are using class that is//

Considering that object is stored in response variable.. then access it like.

console.log(this.state.meta.total)

Tell me if this works.

Edit: Using only one variable -- 

state = {res: {}}
this.setState({res: response})
//access total//
console.log(this.state.res.meta.total)
Improve this answer

6 Comments

No problem. Please accept this as an answer and close this question. Cheers!
But can i make it possible using only one state variable??
this will work if you want to use only one variable.. tell me if it doesn't work
okay.. can you console.log this.state.res? Do it inside render and before return.
Please note @AtinSingh, marking the answer as accepted does NOT close the question. Unless it is a duplicate, or is off-topic, you shouldn't mention to users that the question should be closed.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.