How to format and display JSON data using Array.map in Reactjs?

Question

I am trying to display data which is stored as userList state variable. I am trying to map each object and display name and email parameter from each object but it does not display anything on web page I can only see the data using console.log(). I am displaying Users using displayUsers() and getting data from API endpoint using getAllUser(). I think my displayUsers() function is wrong. Code:

import React, { Component } from 'react';
import axios, { post } from 'axios';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
          userList:[]
    }
  }

  ComponentDidMount(){
        if(window.sessionStorage.getItem("ud") !== null){
            var _userData = JSON.parse(window.sessionStorage.getItem("ud"));
            this.userDetails = _userData;
        }
        this.getAllUser();
  }

  getAllUser(){
        axios({
            method:"GET",
            url:"http://62.210.93.54:6010/api/getAllUser",
            auth:{
                username:this.userDetails.email,
                password:this.userDetails.password
            }
        }).then((response)=>{
            console.log(response.data);
            this.setState({
                userList:response.data.results
            })    
        })
  }

  displayUsers(){
        return this.state.userList.map( user => {
          return(
            <div className="item-card">
               <div className="info">    
                    <div className="username">Username: {user.name}</div>
               </div>
            <div className="del-wrap">
                <img src={require("../../images/cancel.svg")}/>
            </div>
            </div>
            );
        })
  }

  render() {
        return(
          <div className="users-wrap">
                <h1>Users</h1>
                <div className="task-content">
                    <div className="user-wrap">
                        <div className="users">
                            <div className="item-card add">
                                    <img src={require("../../images/plus.svg")} className="plus-icon" />
                                    <div className="lbl">Add a new User</div>
                             </div>

                             {this.displayUsers()}

                        </div>
                    </div>
                </div> 
          </div>
        );
    }
}

export default App;

Model Schema:

   {
  "results": [
    {
      "createdBy": null,
      "updatedBy": "Ankit",
      "createdDate": 1523892363509,
      "updatedDate": 1524066767311,
      "id": "5ad4c1964417fc66067b29cf",
      "userName": "admin",
      "email": "[email protected]",
      "roles": [
        "USER"
      ]
    },
    {
      "createdBy": null,
      "updatedBy": null,
      "createdDate": 1523971940177,
      "updatedDate": 1523971940177,
      "id": "5ad5f7640ff4ec580b885a2e",
      "userName": "varun",
      "email": "[email protected]",
      "roles": [
        "ADMIN"
      ]
    },
    {
      "createdBy": null,
      "updatedBy": null,
      "createdDate": 1524302563169,
      "updatedDate": 1524302563169,
      "id": "5adb02e30ff4ec53076ffbb7",
      "userName": "Rahul",
      "email": "[email protected]",
      "roles": [
        "admin"
      ]
    },
    {
      "createdBy": null,
      "updatedBy": null,
      "createdDate": 1524303894654,
      "updatedDate": 1524303894654,
      "id": "5adb08160ff4ec53076ffbbb",
      "userName": "Nandita",
      "email": "[email protected]",
      "roles": [
        "member"
      ]
    },
    {
      "createdBy": null,
      "updatedBy": null,
      "createdDate": 1524308787960,
      "updatedDate": 1524308787960,
      "id": "5adb1b330ff4ec53076ffbc2",
      "userName": "user",
      "email": "[email protected]",
      "roles": [
        "USER"
      ]
    },
    {
      "createdBy": null,
      "updatedBy": null,
      "createdDate": 1524327504461,
      "updatedDate": 1524327504461,
      "id": "5adb64500ff4ec53076ffbc4",
      "userName": "Rinku",
      "email": "[email protected]",
      "roles": [
        "admin"
      ]
    }
  ],
  "httpStatus": "OK",
  "message": "All Users response"
}

Shubham Khatri · Accepted Answer · 2018-05-03 06:07:26Z

1

As per your model schema, your user object contains userName and not name, so you would write user.userName in your displayUsers method, Also a key param is helpful in performance optimisation and you should add a unique key on the element returned by the iterator

 displayUsers(){
        return this.state.userList.map( user => {
          return(
            <div className="item-card" key={user.id}>
               <div className="info">    
                    <div className="username">Username: {user.userName}</div>
               </div>
            <div className="del-wrap">
                <img src={require("../../images/cancel.svg")}/>
            </div>
            </div>
            );
        })
  }

answered May 3, 2018 at 6:07

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Shubham Khatri Over a year ago

does the mentioned solution not work for you, I see that you have added not objects to your results array, but it should work

stone rock Over a year ago

I want to display userName and email from each JSON object so instead of user.userName should it be user.results.userName

Shubham Khatri Over a year ago

As far as I understand it should only be user.userName, since you assing response.data.results to userList

stone rock Over a year ago

Ok your answer works but I am not getting the JSON response from API endpoint how can I check if it is valid API endpoint or not ?

Shubham Khatri Over a year ago

make use of Postman chrome extension and check if you are getting correct response

|

swapnil2993 · Accepted Answer · 2018-05-03 05:59:35Z

1

You need to add a key to the root element of map object to be returned. `

displayUsers(){
    return this.state.userList.map( user => {
      return(
        <div key={user.name} className="item-card">
           <div className="info">    
                <div className="username">Username: {user.name}</div>
           </div>
        <div className="del-wrap">
            <img src={require("../../images/cancel.svg")}/>
        </div>
        </div>
        );
    })
  }

answered May 3, 2018 at 5:59

swapnil2993

1,39411 silver badges16 bronze badges

2 Comments

stone rock Over a year ago

I think it is not necessary here.

stone rock Over a year ago

I have edited my question please see the JSON response model schema I want to display email and name parameter from the JSON object using map

Qwerty · Accepted Answer · 2018-05-03 08:40:35Z

1

Before I edited your title, this would be a handy shortcut to display formatted JSON data right in the document.

displayUsers = () => <pre>{JSON.stringify(this.state.userList, null, '  ')}</pre>

to only display userName and email, use a whitelist array like this

JSON.stringify(this.state.userList, ["userName", "email"], '  ')

You can read more about JSON.stringify(value[, replacer[, space]]) here.

edited May 3, 2018 at 8:40

answered May 3, 2018 at 8:34

Qwerty

32.5k26 gold badges131 silver badges159 bronze badges

Collectives™ on Stack Overflow

How to format and display JSON data using Array.map in Reactjs?

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related