What's the right way for push json result to array in ReactJS?

Question

I want fetch a json api and push that result into an array:

import React from 'react';
import ReactDOM from 'react-dom';

function Users(){

    const url = 'https://randomuser.me/api/?results=5';
    let nodes = [];

    fetch(url)
    .then(response => {
        return response.json();
    })
    .then(j => {
        for( var i = 0; i <= j.results.length; i++ ){
            nodes.push(<li>{j.results[i].name.first}</li>);
        }
    });

    return(
            <ul>{nodes}</ul>
    );

}

ReactDOM.render(
    <Users />,
    document.getElementById('main')
);

But I have the following error in the console:

TypeError: j.results[i] is undefined

How can I fixed this error?

The error is because of small comparison mistake, i <= j.results.length; should be i < j.results.length; but you structuring is not correct — Shubham Khatri
– Shubham Khatri, Commented Dec 20, 2017 at 9:09
@ShubhamKhatri i edited , but i have not any result, so what's the right way for repeating json result in react ?! — Mohammad
– Mohammad, Commented Dec 20, 2017 at 9:19

The Reason · Accepted Answer · 2017-12-20 09:29:45Z

1

I'm not sure that this is react way of fixing this problem. Here is the solution of your problem:

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      nodes: []
    }
  }

  componentDidMount(){
    this.fetchData();
  }

  fetchData(){
    console.log('here')
    const url = 'https://randomuser.me/api/?results=5';
    fetch(url)
      .then(response => response.json())
      .then(data => {
        const nodes = data.results;
        this.setState({nodes})
      })
  }

  render(){
    return (
      <ul>
        {this.state.nodes.map(node => <li key={node.name.first} >{node.name.first}</li>)}
      </ul>
    )
  }
}

Worked example here. Hope it makes sense.

edited Dec 20, 2017 at 9:29

answered Dec 20, 2017 at 9:22

The Reason

8,0135 gold badges27 silver badges43 bronze badges

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

Comments

challenger · Accepted Answer · 2017-12-20 09:25:07Z

0

import React from 'react';
import ReactDOM from 'react-dom';

class Users extends React.Component{
  constructor(props) {
     super(props)
     this.state = {
       nodes: []
     }
     this.load()
  }

  load() {
    const url = 'https://randomuser.me/api/?results=5';
    return fetch(url)
    .then(response => response.json())
    .then(({results:nodes}) => this.setState({nodes}))
   }

   render() {
     let {nodes} = this.state
     return <ul>{nodes.map(({name:{first}}) => <li>{first}</li>)}</ul>
   }
 }

 ReactDOM.render(
     <Users />,
     document.getElementById('main')
 );

answered Dec 20, 2017 at 9:25

challenger

2,2141 gold badge21 silver badges25 bronze badges

Collectives™ on Stack Overflow

What's the right way for push json result to array in ReactJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related