javascript - How to use .map() function on JSONArray in reactjs ES6 - Stack Overflow

admin管理员组

文章数量:1341465

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

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

• javascript
• json
• reactjs
• ecmascript-6

Share Follow edited Aug 27, 2017 at 11:25 Muhammad Hamid Raza asked Aug 27, 2017 at 11:08 Muhammad Hamid RazaMuhammad Hamid Raza 20522 gold badges44 silver badges1515 bronze badges 6

• 5 Are you sure that allFiles or files are really arrays? Have you tried a console.log() before .map() ? – 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 Commented Aug 27, 2017 at 11:17
• 2 Now try console.log( typeof files ) and see what it says – adeneo Commented Aug 27, 2017 at 11:17
• 2 I think i should first parse it. am i right? – Muhammad Hamid Raza Commented Aug 27, 2017 at 11:20
• 2 yes use JSON.parse(files).map() – Dinesh undefined Commented Aug 27, 2017 at 11:20

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

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; }

本文标签： javascriptHow to use map() function on JSONArray in reactjs ES6Stack Overflow