如何在react js中迭代嵌套数组中的值?

时间:2017-05-17 09:35:59

标签: reactjs

我有一个像这样的嵌套数组。内部角色我还有两个带有roleId和roleName的对象。 我要求在UI中显示两个对象的roleName。如何在reactjs中实现这一点?

0:Object
displayName: "User Two"
dob:null
email:null
firstName:"User"
gender:null
languageId:null
lastAccessedOn:null
lastName:"Two"
middleName:null
password:null
pin:null

roles:Array(2)
0:Object
roleId:"37d8f51d-09c9-4d55-9ab0-60d0d031b412"
roleName:"Theranos Manufacturing"
1:Object
roleId:"af4c1fd4-6a7b-4b3e-aad1-da5b372502d8"
roleName:"Theranos Master Admin"

length:2
__proto__
:
Array(0)

1 个答案:

答案 0 :(得分:1)

假设您的数组名称为data,并且您的objects包含key roles,而{data.map((item, index) => { return ( <div> {item.roles.map(role, idx) => { return <ul key={role.roleId}><li >{role.roleId}</li> <li>{role.roleName}</li></ul> }} </div> ) })} 又是一个数组,那么您可以在其上嵌套地图,如

<img onclick="getImage()" src="img/camera.png" width="50%"/>
<div class="progressbar" id="progressbar">