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":".jpg",
        "medium":".jpg",
        "thumbnail":".jpg"
     },
     "nat":"NL"
  },
  ...

This json file is the response from randomuser 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.

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.

• javascript
• json
• reactjs
• jsx

1 Answer 1

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.