How to make a list from json object using React

Question

I'm gettin Json object like this from a service

{"0":{"UserID":1,"Gender":"F","Age":1,"Occupation":10,"Zip-code":48067},
"1":{"UserID":2,"Gender":"M","Age":56,"Occupation":16,"Zip-code":70072},
"2":{"UserID":3,"Gender":"M","Age":25,"Occupation":15,"Zip-code":55117},
"3":{"UserID":4,"Gender":"M","Age":45,"Occupation":7,"Zip-code":2460},"4":}

Then using React am trying to map it to a state, but it's an object not an array of objects

class App extends Component {
  constructor() {
    super();
    this.state = {
      users: []
    }
  }
  componentDidMount() {
    this.getUsers();
  };

  getUsers() {

    axios.get(`${SERVICE_URL}/users`)
    .then((res) => { 
      console.log(res.data); // I can see the data in the console
      this.setState({ users: res.data.map((data) => {return (data.key, data.value)} }); })
    .catch((err) => { console.log(err); });
  }

I though something like this might work, but no.

this.setState({ users: res.data.ToArray().map((data) => {return (data.key, data.value)})})})

Final update, this is what worked. (probably still cleaner way but this works)

    class App extends Component {
    constructor() {
      super();
      this.state = {
        users: []
      }
    }
    componentDidMount() {
      this.getUsers();      
    };

    getUsers() {      
      axios.get(`${SERVICE_URL}/users`)
      .then((res) => {  

        this.setState({ users: Object.values(JSON.parse(res.data))});

       })   
      .catch((err) => { console.log(err); });
    }

  render() {

    return (
     <div>
     <table class='userList'> 
        <tr> 
            <td>UserId</td>
            <td>Gender</td>
            <td>Age</td>
            <td>Occupation</td>
        </tr>        

            {this.state.users.map(({UserID, Gender, Age, Occupation}) => {
              return (
                <tr key={'user'+UserID}>
                    <td> { UserID } </td>
                    <td> { Gender } </td>
                    <td> { Age } </td>
                    <td> { Occupation } </td>              
              </tr>
            )})}
        </table>
      </div>
    );
  }
}

export default App;

@TypeError: res.data.map is not a function ... so I cant use that. I'd be happy to get any data passed into the state and I can work from there — Kickaha
– Kickaha, Commented Jun 14, 2018 at 15:51
You want an array of users right [{..user_object..}, {..user_object..}]? — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Jun 14, 2018 at 16:12

David AK · Accepted Answer · 2018-06-14 15:49:37Z

2

Try to parse it before with JSON.parse(res), and then you can map your array like you're doing to set your state

answered Jun 14, 2018 at 15:49

David AK

1251 silver badge14 bronze badges

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

2 Comments

Kickaha Over a year ago

error : JSON.parse: unexpected character at line 1 column 2 of the JSON data"

Kickaha Over a year ago

This helped, thank you. If you can see any good refactorings in my updated question code ill accept your.

Nikhil Aggarwal · Accepted Answer · 2018-06-15 02:21:26Z

1

As far as I understood your problem is that you have an object as input and you need to convert it into an array and set it in a variable. You can use Object.values

this.setState({ users: Object.values(res.data)});

EDIT

You can improve your code as following

this.setState({ users: Object.values(res.data)});
{this.state.users.map(([UserID, Gender, Age, Occupation, ...rest]) => {
     return (
         <tr>
             <td> { UserID] } </td>
             <td> { Gender } </td>
             <td> { Age } </td>
             <td> { Occupation } </td>
             <td> { rest['Zip-Code'] } </td>
        </tr>
     )
 })}

edited Jun 15, 2018 at 2:21

answered Jun 14, 2018 at 16:26

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

6 Comments

Kickaha Over a year ago

This helped, thank you. If you can see any good refactorings in my updated question code ill accept your.

Kickaha Over a year ago

This is much neater looking, but it does not work with the object structure I posted. Object.values(res.data) looks to be flattening all the data received into an array of single characters.

Nikhil Aggarwal Over a year ago

@Kickaha - If an object has 4 key value pair as per the example, Object.values will create an array of 4 objects with each object having the said properties.

Kickaha Over a year ago

Yes that's correct, I checked and my res.data is a string so needed to be parsed with this.setState({ users: Object.values(JSON.parse(res.data))}); ... but the result raises "TypeError: Invalid attempt to destructure non-iterable instance". it seems to be a lot of data mangling to change the response string into an iterable. There must be something simple I am missing. btw, thanks for trying to help. The type of the state is object even though its an array of objects ... sigh ..

Kickaha Over a year ago

I'll update my question a little, thanks for the help. If you can see anything I'm obviously missing please comment again. (even though you've already won the internet today) ;)

|

Itamar Dori · Accepted Answer · 2018-06-14 15:47:13Z

1

You can use the Object.keys() method to iterate over object keys.

So you can do something similar to this:

Object.keys(res.data).map(id => res.data[id]) which will be evaluated to an array of values.

If you don't care about your keys at all, you can use Object.values() method

answered Jun 14, 2018 at 15:47

Itamar Dori

112 bronze badges

1 Comment

Kickaha Over a year ago

This helped, thank you. If you can see any good refactorings in my updated question code ill accept your.

Collectives™ on Stack Overflow

How to make a list from json object using React

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related