Parsing JSON from ReactJS application

Question

I am trying to parse a nested json request from my reactjs web app.

Below is the json that I received from a request.

response.data

{
    "total": 2,
    "offset": 1,
    "limit": 987,
    "staging": [
        {
            "id": 101,
            "name": "Test Stage"
        },
        {
            "id": 102,
            "name": "Dev Stage"
        },
        {
            "id": 103,
            "name": "Prod Stage"
        }
    ]
}

I need to parse “staging” and display the results on browser screen.

Below is the code that I am trying to parse. But, it is throwing error (SyntaxError: Unexpected token o in JSON at position 1).

export default class ItemLister extends React.Component {
  state = {
    persons: []
  }
    componentDidMount() {

        axios
            .get('https://xxx.yyy.zzz/xyz/zyx/', {

                headers: {
                    'authorization':'Bearer XXXXXXXXX',
                    'X-Api-Key': 'XXXXXXXXXXXXXX',               
                },
                withCredentials: true

            })
            .then(response => {

                console.log(response.data) // it gets the correct response and printing in logs

                const persons = response.data;

                this.setState({ persons });

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

  render() {
    return <ul>{this.state.persons.map(person => <li>{person.name}</li>)}</ul>
  }
}

ReactDOM.render(<ItemLister />, document.getElementById('root'))
registerServiceWorker()

I couldn't find fix for it. Can someone guide me whether the parsing of such json is correct or not and how to get the parsed results and displayed on screen?

Is staging really wrapped between backquote? Or normal quote? — Nikko Khresna
– Nikko Khresna, Commented Oct 30, 2018 at 15:47
Do you actually need to parse it as JSON? Is response.data already JSON? — Alexander Staroselsky
– Alexander Staroselsky, Commented Oct 30, 2018 at 15:51

n1stre · Accepted Answer · 2018-10-30 16:00:40Z

1

An error occurs because you're trying to parse an Object instead of a String. Simply skip JSON.parse and set result to response.data:

.then(response => {
  console.log(response.data) // it gets the correct response and printing in logs
  this.setState({ result: response.data });
})

And in you render:

render() {
  return (
    <ul>
      { this.state.result &&
        this.state.result.staging &&
        this.state.result.staging.map(person => <li>{person.name}</li>)
      }
    </ul>
  );
}

edited Oct 30, 2018 at 16:00

answered Oct 30, 2018 at 15:53

n1stre

6,1064 gold badges24 silver badges42 bronze badges

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

2 Comments

Stella Over a year ago

Ok, this is not giving error now. But, not displaying on screen in the browser.

Stella Over a year ago

Ok sure. Yes Added now

Collectives™ on Stack Overflow

Parsing JSON from ReactJS application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related