How to use .map() function on JSONArray in reactjs ES6

Question

I have a JSONArray returned by the server. I want to use .map() on it so that i can get key,values pairs of every object present in that array. I have written following code but i am getting error "files.map is not a function". 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:

[{"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"}]

Are you sure that allFiles or files are really arrays? Have you tried a console.log() before .map() ? — Nocebo
– Nocebo, Commented Aug 27, 2017 at 11:11
@Nocebo Yes, the JSONArray which i posted is actually what console.log gave me. — Muhammad Hamid Raza
– Muhammad Hamid Raza, Commented Aug 27, 2017 at 11:17

Hassan Imam · Accepted Answer · 2022-06-14 07:46:58Z

As pointed out by other users, you have to use JSON.parse() to get object from your string. 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; }

Collectives™ on Stack Overflow

How to use .map() function on JSONArray in reactjs ES6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related