【react】map 遍历json数据
2017-07-26 16:12
351 查看
数据格式:(此数据写在了getInitialState方法中)
list: [{ 'id':'1', 'title':'123', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'2', 'title':'456', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'3', 'title':'789', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' }]
页面中遍历方法(此处用this.state.list便可以取到值)
<table> <tbody> <tr className="first_tr"> <td>内容</td> <td>发起人</td> <td>类型</td> <td>时间</td> <td>操作</td> </tr> { this.state.list.map(function(name){ return ( <tr key={name.id}> <td>{name.title}</td> <td>{name.person}</td> <td>{name.type}</td> <td>{name.time}</td> <td>{name.operation}</td> </tr> ) }) } </tbody> </table>
使用map遍历时,需要给子元素添加一个key,作为唯一的标识,而且key值必须要连续,否则会报错
相关文章推荐
- JS遍历后台传过来的JSON数据(由Map转化成)
- 前端如何遍历Map转换而来的json数据?
- 夺命雷公狗-----React---9--map数据的遍历
- 遍历json数据放map集合中
- 遍历所有Map(json)中的键值对
- PHP中遍历stdclass object 及 json 总结[中国航天神舟十号以json形式向地面返回数据]
- PHP中遍历stdclass object 及 json 总结[中国航天神舟十号以json形式向地面返回数据]
- json格式 Js里循环遍历json格式数据
- JS循环遍历json数据
- react.js map遍历的问题
- 工作总结 js for 循环遍历 json 数据
- jquery前端递归打印出树状结构的多层复杂map或json键值对数据
- Gson解析(List和Map)格式json数据
- springmvc配合jsp/ajax/json,实现简单的jsp遍历后台数据
- react map 遍历
- android 读取JSON数据(遍历JSONObject和JSONArray)
- JS 循环遍历JSON数据
- jquery遍历JSON数据
- request的Map数据的遍历
- json数据 填充遍历表格行列 jQuery