How to map all results from Twitch API using cursor - React

Question

The Twitch API displays a maximum of 60 records and a _next cursor for pagination. I can't find a way to map through all the results using the cursor in React using the map function.

  componentDidMount() {
    this.getComments();
  }

  getComments(){
    const api = 'https://api.twitch.tv/v5/videos/'+ this.state.value +'/comments?client_id='+ this.state.cid;
    fetch(api, {
      method: 'get',
      headers: {"Client-ID": this.state.cid}
    })
    .then((response) => response.text())
      .then((responseText) => {
        this.setState({hits : (JSON.parse(responseText)), api: api})
     });
   }



   render(){

    const { hits } = this.state;
    console.log({hits});

    return (
      <div>
         <ul id="results">
           { hits && hits.comments && hits.comments.length !== 0 ?
                 hits.comments.map(hit =>
                   <li key={hit._id}>
                     <span>[{this.convertSeconds(hit.content_offset_seconds)}] - {hit.message.body}</span>
                   </li>
                 )
              :
                 <div>No Comments Found</div>
           }
         </ul>
     </div>
    );
  }

How would I map through using the _next cursor with this mapping technique? Or is there a different way I could achieve it?

Below is the JSON response..

can you post your JSON response ? – sathish kumar Feb 20 '19 at 16:49 — sathish kumar, Feb 20 '19 at 16:49

score 2 · Answer 1 · answered Feb 20 '19 at 16:57

2

To get the pagination response you need to make another call to Twitch API and pass the cursor in after query parameter or before query parameter to your twitch call.

Example -

const api = 'https://api.twitch.tv/v5/videos/<CLIENT_ID>?after=<NEXT_CURSOR>

answered Feb 20 '19 at 16:57

swapnesh

26,318
22
94
126

Ahhh right, I see. How would I do that using the map function I'm implementing above? – TJDev Feb 20 '19 at 16:58
@TylerWatts Store the response in state and use the token accordingly. – swapnesh Feb 20 '19 at 17:06

score 1 · Answer 2 · answered Feb 20 '19 at 17:17

1

My suggestion is recursively call getComments function like below if you want all result at once or use loadmore button and set _next token in state based on button click.

let result = []
getComments(){
   const api = 'https://api.twitch.tv/v5/videos/'+ this.state.value +'/comments?client_id='+ this.state.cid;
   fetch(api, {
     method: 'get',
     headers: {"Client-ID": this.state.cid}
   })
   .then((response) => response.text())
     .then((responseText) => {
       // add response untill you get all results
       if(responseText){
          //store array of response objects
          this.setState({
           hits : [...this.state.hits, ...responseText],
           cid : "YOUR NEW CURSOR ID FROM RESPONSE"})
           getComments()
       } else {
          //exist the recursion
          return ;
       }

    });
  }

answered Feb 20 '19 at 17:17

sathish kumar

1,477
1
11
18

Ahhh right, this is a good way. How would I get the _next value from responseText in that cid field though? I've tried cid: JSON.parse(responseText)._next but I don't think that's right – TJDev Feb 20 '19 at 17:24
where are you struggling.. what are the data you get in responseText? – sathish kumar Feb 20 '19 at 23:22
https://stackoverflow.com/questions/54796689/mapping-through-a-multidimensional-array-containing-arrays-of-objects-in-react – TJDev Feb 20 '19 at 23:25
It's returning a multidimensional array that I'm having trouble mapping through – TJDev Feb 20 '19 at 23:32

How to map all results from Twitch API using cursor - React

2 Answers2