[英]How to use .map() function on JSONArray in reactjs ES6
I have a JSONArray returned by the server.我有一个服务器返回的 JSONArray。 I want to use .map() on it so that i can get key,values pairs of every object present in that array.我想在它上面使用 .map() 以便我可以获得该数组中存在的每个对象的键值对。 I have written following code but i am getting error "files.map is not a function".我编写了以下代码,但出现错误“files.map 不是函数”。 Can anyone please help me resolve this?谁能帮我解决这个问题?
showUploadedFiles()
{
const page = 1;
const items_per_page = this.state.event.file_ids.length;
getAllTaskFiles(this.state.event.id, page, items_per_page).then((allFiles) => {
this.renderUploadedFiles(allFiles);
});
}
renderUploadedFiles(files)
{
let details = null;
details = files.map((singleFile) => {
return (
<div>
<a href="#" >{singleFile.filename}</a>
<a href="#" >{singleFile.file_path}</a>
</div>
);
});
}
My JSONArray is:我的 JSONArray 是:
[{"file_id": 5224879255191552, "filename": "children_walk_friends_forest_116878_3840x2160.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC81MjI0ODc5MjU1MTkxNTUyL2Zha2UtemRNeklhZ1RTYl9PN3RXY2pXbkhVQT09"}, {"file_id": 4943404278480896, "filename": "banner_old.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC80OTQzNDA0Mjc4NDgwODk2L2Zha2UtcmJjbDBVdVFzVmZkMjRtRUV2ME1xZz09"}]
As pointed out by other users, you have to use JSON.parse()
to get object from your string.正如其他用户所指出的,您必须使用JSON.parse()
从字符串中获取对象。 Here is the code snippet, storing your files in an array.这是代码片段,将您的文件存储在一个数组中。
const str = '[{"file_id": 5224879255191552, "filename": "children_walk_friends_forest_116878_3840x2160.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC81MjI0ODc5MjU1MTkxNTUyL2Zha2UtemRNeklhZ1RTYl9PN3RXY2pXbkhVQT09"}, {"file_id": 4943404278480896, "filename": "banner_old.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC80OTQzNDA0Mjc4NDgwODk2L2Zha2UtcmJjbDBVdVFzVmZkMjRtRUV2ME1xZz09"}]'; const files = JSON.parse(str); const details = files.map((singleFile) => { return ( `<div> <a href="#">{singleFile.filename}</a> <a href="#">{singleFile.file_path}</a> </div>` ); }); console.log(details);
.as-console-wrapper { max-height: 100% !important; top: 0; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.