CODEWITHSUNDEEP
javascriptjsonreactjsreact-redux
Fenici
Fenici

Reputation: 461

ERROR when fetch JSON data within the Multi-array in React JS?

I am having problem with fetching JSON data

the Error I'm getting is 

  const list = this.state.images.map((image) =>

Unhandled Rejection (TypeError): this.state.images.map is not a function

this is data API link , you can use postman to view the JSON data 

class App extends Component {
  constructor(props) {
    //initiate props
    super(props);

    this.state = {
      images: []
    };
   this.articlesList = this.articlesList.bind(this);
  }

  //Component Lifecycle
  //what do we put in here ?
  componentWillMount() {

    //after data is fetched
    fetch('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=5500a486d12044849fe8ada1061c4d83&limit=5')
    .then(res => res.json()).then((data) => {
      // console.log('data', data)
      this.setState({images:data});

    })
  }

articlesList(){
  const list = this.state.images.map((image) =>
      <div className="col-md-6" key={image._id}>
         <Article url ={image.url}/>
      </div>
)

  return(list);
}

and I try to gain access to Images/Original/url in JSON file

Upvotes: 2

Views: 601

Answers (1)

Stephen Gilboy
Stephen Gilboy

Reputation: 5825

The response coming back looks like this: 

{ 
  "data": [],
  "pagination": {},
  "metadata": {}
}

So you'll need to set images to the data property that is in the JSON response. In the following snippet I changed your data variable to resp and then am accessing the data property. 

//after data is fetched    
fetch('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=5500a486d12044849fe8ada1061c4d83&limit=5')
.then(res => res.json()).then((resp) => {

  // Here I changed 'data' to 'resp' and am accessing the data array.
  this.setState({images:resp.data});

})

Upvotes: 2

Related Questions