Reactjs - How can I loop through an API that has been chained using axios?

Question

I am trying to build something with hacker news API but I have a problem though. To get the items displayed to the screen. The items I need I need to first call another endpoint. I called this endpoint and looped through it so I can pass the data from that endpoint to the items endpoint which I need to work but I am only getting one Item displayed. How can I further do this to get like 30 items all at once?

state={
    hackernews: []
  }
  componentDidMount(){
    Axios.get('/newstories.json')
    .then(res => {
      for(let i = 0; i<res.data.length; i++){
        const newsID = res.data[i];
        return Axios.get(`/item/${newsID}.json`)
      }
    })
    .then(res=>{
      const news = res.data
      this.setState({hackernews: [...this.state.hackernews, news]})
      
    })
  }

The hackernews api link https://github.com/HackerNews/API

Boussadjra Brahim · Accepted Answer · 2020-08-31 19:44:38Z

1

You could use async/await to fetch the IDs, then use .then normally :

 async componentDidMount(){
   let res=await Axios.get('/newstories.json')

     for(let i = 0; i<res.data.length; i++){
        const newsID = res.data[i];
       Axios.get(`/item/${newsID}.json`)  
       .then(res1=>{
          const news = res1.data
          this.setState({hackernews: [...this.state.hackernews, news]})
      
         })
     }

}

answered Aug 31, 2020 at 19:44

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

3 Comments

Chinomso Johnson Over a year ago

Thank you so much. However, there's a problem though. It comes onto the screen but throws an error.

Chinomso Johnson Over a year ago

It continues looping through the items until it throws an error of null for what I am trying to do. I have used the params method to limit it but it still throws it. I would look for more information online.

Boussadjra Brahim Over a year ago

if there's a lot of details you could post another question

Collectives™ on Stack Overflow

Reactjs - How can I loop through an API that has been chained using axios?

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