React Native : iterate and display nested objects using Hooks

Question

I want to display my user data stored in my api's How can I iterate through my apis data. Can anyone demonstrate it with example ? My api data looks like this:

{
  "data": {
    "__v": 0,
    "_id": "5edaa8cc76d6b20017",
    "createdAt": "2020-06-05T20:19:24.365Z",
    "email": "[email protected]",
    "name": "Joe",
    "role": "user"
  },
  "success": true
}

Here is the example of my code:

const HomeScreen = props => {

  const [dataSource, setDatasource] = useState({});

  const Boiler = async () => {
    const token = await AsyncStorage.getItem('token');
    fetch('{{URL}}/api/v1/auth/me', {
      method: 'GET',
      headers: new Headers({
        Authorization: 'Bearer ' + token,
      }),
    })
      .then(res => res.json())
      .then(responeJson => {

        console.log(responeJson);
        setDatasource({
          ...dataSource,
          dataSource: responeJson,
        });
      })
      .catch(error => {
        console.error(error);
      });
  };
  useEffect(() => {
    Boiler();
  }, []);

}

I would suggest you add some screen shot or mockup, which shows what do you want to achieve by iterating. Answer by Shubham below stackoverflow.com/a/62255337/5332817 should work if your response has fixed structure (keys) so you can just bind to ui. If you have variable keys then answer by roman stackoverflow.com/a/62255338/5332817 can be used and there you can bind the data as per need. — Harshal Bhavsar
– Harshal Bhavsar, Commented Jun 8, 2020 at 5:13

Shubham Khatri · Accepted Answer · 2020-06-08 05:36:18Z

2

You response from the API is an object which you can directly render in your component without the need for iteration

Also note that when you update state, you would not explicitly set key as dataSource

Update your state like

   setDatasource({
      ...dataSource,
      ...responeJson.data,
   });

and then render your data like

return (
   <View>
       <Text>CreatedAt: {dataSource.createdAt}</Text>
       <Text>email: {dataSource.email}</Text>
       <Text>name: {dataSource.name}</Text>
       <Text>role: {dataSource.role}</Text>
   </View>

)

edited Jun 8, 2020 at 5:36

answered Jun 8, 2020 at 5:05

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

4 Comments

Aniket Yadav Over a year ago

I want to access the data i.e (value) from the objects and display it on my screen. I tried your solution but the data is not rendered on the screen.

Shubham Khatri Over a year ago

Did you also update it the way I showed? setDatasource({ ...dataSource, ...responeJson.data, });

Aniket Yadav Over a year ago

It worked thanks, I forgot to add data after ...responeJson.data. Thankyou for your solution. :)

Shubham Khatri Over a year ago

Glad to have helped.

Roman Mahotskyi · Accepted Answer · 2020-06-08 05:05:10Z

0

If you need to iterate over object use can use for..in loop.

const response = {
  "data": {
    "__v": 0,
    "_id": "5edaa8cc76d6b20017",
    "createdAt": "2020-06-05T20:19:24.365Z",
    "email": "[email protected]",
    "name": "Joe",
    "role": "user"
  },
  "success": true
};

function iterateOverData(data) {
  for(let key in data) {
    console.log(key, data[key]);
  }
}

iterateOverData(response.data);

answered Jun 8, 2020 at 5:05

Roman Mahotskyi

6,9099 gold badges53 silver badges96 bronze badges

Collectives™ on Stack Overflow

React Native : iterate and display nested objects using Hooks

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related