Iterating through a json file using map function in react

Question

I'm new to react and trying to wrap my head around it. Currently, I'm trying to display a list of emails and usernames from a json file that look like this:

    {  
"results":[  
  {  
     "gender":"female",
     "name":{  
        "title":"mrs",
        "first":"maïssae",
        "last":"hummel"
     },
     "location":{  
        "street":"7387 burgemeester reigerstraat",
        "city":"opsterland",
        "state":"utrecht",
        "postcode":49157
     },
     "email":"maï[email protected]",
     "login":{  
        "username":"bigladybug314",
        "password":"news",
        "salt":"4rnXJ7rr",
        "md5":"36c340d3a1f14b04ead5fa45899fa6d8",
        "sha1":"9303a71d951971500d8e01aa69bfb6b18a9c14ee",
        "sha256":"cad8fbc826f9add00262cd2e5850dc985b3da37a83d2603e14a700322738729a"
     },
     "dob":"1967-10-07 16:49:29",
     "registered":"2007-09-30 12:00:20",
     "phone":"(830)-232-0383",
     "cell":"(465)-588-8299",
     "id":{  
        "name":"BSN",
        "value":"48491274"
     },
     "picture":{  
        "large":"https://randomuser.me/api/portraits/women/12.jpg",
        "medium":"https://randomuser.me/api/portraits/med/women/12.jpg",
        "thumbnail":"https://randomuser.me/api/portraits/thumb/women/12.jpg"
     },
     "nat":"NL"
  },
  ...

This json file is the response from randomuser api (https://randomuser.me/api/?results=10). I want to iterate through the json objects, return and render a list of all the emails and usernames (under login) of each user.

Thanks in advance for the help. Also, any other useful information about mapping would be greatly appreciated.

miken32 · Accepted Answer · 2022-10-16 16:37:28Z

3

This is pretty standard and you should read the docs and probably go through the tutorial if this is your first time with React

Anyway, you have a list of results and you map over them like this:

<ul>
  {results.map(user => <li key={user.id}>{user.login.username} - {user.login.email}</li>)}
</ul>

I don't know what randomuser.me is about, but it seems that the id fields from each result is not very helpful. So you'll need to find a unique value for the key.

edited Oct 16, 2022 at 16:37

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Dec 5, 2017 at 22:18

Ionut Achim

9775 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Iterating through a json file using map function in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related