使用function中的map函数迭代json文件
使用function中的map函数迭代json文件
提问于 2017-12-05 22:03:14
我是新来的反应，并试图把我的头围绕着它。目前，我正在尝试显示来自json文件的电子邮件和用户名列表，这些邮件和用户名如下所示：
{
"results":[
{
"gender":"female",
"name":{
"title":"mrs",
"first":"maïssae",
"last":"hummel"
},
"location":{
"street":"7387 burgemeester reigerstraat",
"city":"opsterland",
"state":"utrecht",
"postcode":49157
},
"email":"maïssae.hummel@example.com",
"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"
},
...这个json文件是来自随机用户api (https://randomuser.me/api/?results=10)的响应。我想遍历json对象，返回并呈现每个用户的所有电子邮件和用户名的列表。
提前谢谢你的帮助。此外，任何关于映射的其他有用信息都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-05 22:18:05
这是非常标准的，如果这是您第一次使用React，您应该阅读文档，并可能阅读本教程。
总之，您有一个结果列表，然后按如下方式对其进行映射：
<ul>
{results.map(user => <li key={user.id}>{user.login.username} - {user.login.email}</li>)}
</ul>我不知道randomuser.me是关于什么的，但是似乎每个结果的id字段都不是很有用。因此，您需要为密钥找到一个唯一的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47663403
复制相关文章
相似问题
腾讯云开发者
