REST calls from a react component

Question

I'm trying to replicate same code here with different JSON, but the data is not loading.

Please help, I'm not sure what is missing in the code.

import React from 'react';

export default class ItemLister extends React.Component {
    constructor() {
        super();
        this.state = { items: [] };
    }

    componentDidMount() {
  fetch('http://media.astropublications.com.my/api/drebar_landing.json')
      .then(result=>result.json())
      .then(items=>this.setState({items}));
    }

    render() {
      return(
        <ul>
            {this.state.items.length ?
              this.state.items.map(item=><li key={item.id}>{item.Title}</li>) 
              : <li>Loading...</li>
            }
        </ul>
     )
    }
  }

Can you console.log(items) to check whether you get the json or not. — Saurabh Ghewari, Aug 27 '18 at 04:21

score 2 · Accepted Answer · edited Aug 27 '18 at 05:58

Your api response contains an object ArticleObject and the ArticleObject has array of objects so you need to set the items.ArticleObject to the state.

Take a look at below solution for better understanding

componentDidMount() {
  fetch('http://media.astropublications.com.my/api/drebar_landing.json')
      .then(result=>result.json())
      .then(items=>this.setState({items:items.ArticleObject}));
    }

REST calls from a react component

1 Answers1