how to map through json object in javascript?

Question

I want to map(loop) through the each attribute of the JSON object . the JSON looks like this

[
  {
    "_id": "5ad5c0ccdec0fa2b3c1f1ba0",
    "name": "optioin",
    "job": "google",
    "location": "usa",
    "gender": "male",
    "__v": 0
  },
  {
    "_id": "5ad6043f9fba4125b467c6af",
    "name": "reactjs",
    "job": "facebook",
    "location": "california",
    "gender": "male",
    "__v": 0
  }
]

I want this JSON to be assign to my reactjs state my component looks like this

  componentDidMount() {
      fetch('/api/get/all').then((res)=>{
        return res.json();
      }).then(users =>{
          this.setState({
            user: users
          })
      });
      console.log(this.state.user);
  }

I have initialize my user state as

this.state={user:[]};

the API is responding from node server like this

app.get('/api/get/all',(req,res)=>{
    User.find({},(err,data) => {
      // res.json("inside this");
      if (err) {
        // console.error(err);
        res.json({
          message:"error"
        });
      }
      // console.log(data.toArray);

      res.json(data);
 });
});

I want to get each value for the each JSON object my mapping function

<div className="row">

                {this.state.user.map(u =>{
                    <UserDiv name={u.name} age={u.age} location={u.location} gender={u.gender} job={u.job} />
                })}



            </div>

error i am getting is

this.state.user.map is not a function

result of console.log(this.state.user)

(2) [{…}, {…}]0: {_id: "5ad5c0ccdec0fa2b3c1f1ba0", name: "optioin", job: "pubg", location: "usa", gender: "male", …}1: {_id: "5ad6043f9fba4125b467c6af", name: "reactjs", job: "facebook", location: "california", gender: "male", …}length: 2__proto__: Array(0)

thanks in advance

Looks like there is a typo in your `componentDidMount` method. Perhaps you want to do `user: users` instead of `user: u` — Chirag Ravindra, Apr 18 '18 at 07:11
`this.setState({ user: u })` may be you want to use `this.setState({ user: users })` — Stopee, Apr 18 '18 at 07:11
yeah there is a typo error but i did it with `users` also ...still no hope — Aniketh Saha, Apr 18 '18 at 07:17

score 3 · Accepted Answer · edited Apr 18 '18 at 07:15

3

You are not setting the state correctly in response to your API call, you need to write this.setState({user: users}) and not this.setState({user: u})

componentDidMount() {
      fetch('/api/get/all').then((res)=>{
        return res.json();
      }).then(users =>{
          this.setState({
            user: users
          })
      });
      // console.log(this.state.user);  <-- This won't show update state since setState is asynchronous
  }

Note: You can check this answer on more details about setState being asynchronous

edited Apr 18 '18 at 07:15

Chirag Ravindra

4,760
1
24
35

answered Apr 18 '18 at 07:11

Shubham Khatri

270,417
55
406
400

Any reason why `res => res.json` is written in a more verbose way? – sabithpocker Apr 18 '18 at 07:17
@sabithpocker, the way that you suggest is another way to write `(res)=>{ return res.json(); }` , you can prefer whatever you feel is the best, There is not performance difference, you can check https://stackoverflow.com/questions/49425755/arrow-functions-and-the-use-of-parentheses-or-or/49425823#49425823 – Shubham Khatri Apr 18 '18 at 07:19
@Shubham I changed that that was typo error in this question but in my code I changed that to users but still same error – Aniketh Saha Apr 18 '18 at 07:19
@AnikethSaha, can you check if `Array,isArray(users)` gives true in success function – Shubham Khatri Apr 18 '18 at 07:20
@ShubhamKhatri it is returning true – Aniketh Saha Apr 18 '18 at 07:28
what about `Array.isArray(this.state.user)` in render – Shubham Khatri Apr 18 '18 at 07:31
yup it is returning true ...I guess there is an error in the JSON object may because if it is an array then map function should work – Aniketh Saha Apr 18 '18 at 07:38
can you prepare a demo, I can check it – Shubham Khatri Apr 18 '18 at 07:39
I mean reproducible demo of you problem – Shubham Khatri Apr 18 '18 at 07:43
can You check it on the github repository of this project link : https://github.com/anikethsaha/MERN-stack-fakeUser-Api- – Aniketh Saha Apr 18 '18 at 07:45
@ShubhamKhatri You can check the console.log(this.state.user) result in the question I updated that – Aniketh Saha Apr 18 '18 at 07:54

how to map through json object in javascript?

1 Answers1