How to iterate over json response without using jsx in reactjs?

Question

I'm new in react and I've some doubts about how to iterate over a json response without using jsx cause I'm only able to use react adding it with scripts tag in the html file. Also Babel it's not an option.

I found this https://babeljs.io to convert jsx to createElement but it didn't work eather

This is my json response:

{
    "user": {
        "userId": 1,
        "fullName": "xxxxx",
        "ldapId": "xxxx",
        "contraseña": "xxxxxx!",
        "email": "c@mail",
        "deleteFlag": "N ",
        "access": "Y ",
        "roles": [
            {
                "roleId": 2,
                "roleName": "Admin",
                "focusAccount": "N ",
                "channelAccount": "N ",
                "menuHome": null
            },
            {
                "roleId": 1,
                "roleName": "Dashboard",
                "focusAccount": "N ",
                "channelAccount": "N ",
                "menuHome": null
            }
        ]
    }
}

Reactjs code:

class User extends React.Component {
  state = {
    user: []
  }

  componentDidMount() {
    axios.get('http://localhost:8080/dashboard?user=' + localStorage.getItem("user"))
      .then(res => {
        const user = res.data;
        this.setState({ user });
      })
  }

  React.createElement("ul", null, (void 0).state.user.map(function (user) {
  return React.createElement("li", null, user.fullName);
  }))

}

ReactDOM.render(User, document.getElementById('root'));

In this case I suppose even if I'm doing a map over user, and I know that user it's just one, It should create one li tag inside the ul tag.

Thanks in advance.

In this case you are trying to map into an object which user is an object. If you want to operate as an array you can use. Array.from or [ state.user ].map — Crisoforo Gaspar
– Crisoforo Gaspar, Commented May 6, 2019 at 15:08

Shubham Patwa · Accepted Answer · 2019-05-06 15:31:20Z

1

If you just asking about the iteration over json, it's quite simple, I found that you have object and you are using map to iterate, so you need little changes then it will work.

I'm answering only for iteration and using Object.keys you can iterate inside of json also.


class User extends React.Component {
  state = {
    user: {}
  }

  componentDidMount() {
        axios.get('http://localhost:8080/dashboard?user=' + localStorage.getItem("user"))
        .then(res => {
            const user = res.data;
            this.setState({ user });
        })
    }

    render () {
        const {user} = this.state
        return React.createElement("ul", null, Object.keys(user).map( data => ( 
            React.createElement("li", null, user[data].fullName)
        )))
    }
}

export default User

answered May 6, 2019 at 15:31

Shubham Patwa

3342 silver badges6 bronze badges

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

3 Comments

Carolina Ponce Over a year ago

Nice answer thanks! One more thing, I'm trying to render this with ReactDOM.render( User, document.getElementById('root')); where root is the id of a empty div tag, but this is no working, ideas? I edited the js file.

Shubham Patwa Over a year ago

You can try this @CarolinaPonce ReactDOM.render( React.createElement(User, {}, null), document.getElementById('root') );

Carolina Ponce Over a year ago

Thank you so much! I've been expending hours trying to resolve this!

Collectives™ on Stack Overflow

How to iterate over json response without using jsx in reactjs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related