Отображение через многомерный массив, содержащий массивы объектов в React - PullRequest
0 голосов
/ 21 февраля 2019

Я пытаюсь объединить многомерный массив, каждый из которых содержит объекты, и отобразить их для отображения результатов.

Ниже приведен вывод JSON, который я получаю.

[[{"_id":"f6476f3e-4bdc-49fa-b5ae-c1c52a31582e","created_at":"2019-02-06T18:24:39.501Z","updated_at":"2019-02-06T18:24:39.501Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":123.801,"commenter":{"display_name":"Qiio","_id":"188064613","name":"qiio","type":"user","bio":"[ITA//ENG//SPA] Rising Streamer full of mad ideas |◔◡◉|","created_at":"2017-12-30T20:08:25.700146Z","updated_at":"2019-02-20T17:50:48.904111Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/f2106422-63b5-4c2c-b3c1-f0002a49a0b2-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"first <3","emoticons":[{"_id":"9","begin":6,"end":7}],"fragments":[{"text":"first "},{"text":"<3","emoticon":{"emoticon_id":"9","emoticon_set_id":""}}],"is_action":false,"user_badges":[{"_id":"premium","version":"1"}],"user_color":"#DAA520"},"more_replies":false},{"_id":"b29cb481-a45c-4c49-bfee-38b39496be23","created_at":"2019-02-06T18:25:18.571Z","updated_at":"2019-02-06T18:25:18.571Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":162.871,"commenter":{"display_name":"Qiio","_id":"188064613","name":"qiio","type":"user","bio":"[ITA//ENG//SPA] Rising Streamer full of mad ideas |◔◡◉|","created_at":"2017-12-30T20:08:25.700146Z","updated_at":"2019-02-20T17:50:48.904111Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/f2106422-63b5-4c2c-b3c1-f0002a49a0b2-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"PepoCheer PartyParrot","fragments":[{"text":"PepoCheer PartyParrot"}],"is_action":false,"user_badges":[{"_id":"premium","version":"1"}],"user_color":"#DAA520"},"more_replies":false},{"_id":"a075d861-1c60-4827-a422-0d5d00b13aaa","created_at":"2019-02-06T18:25:33.871Z","updated_at":"2019-02-06T18:25:33.871Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":178.171,"commenter":{"display_name":"Eclips3tv","_id":"177243225","name":"eclips3tv","type":"user","bio":null,"created_at":"2017-10-10T18:35:05.378892Z","updated_at":"2019-02-20T19:22:12.214121Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/e4263564-6ab2-47fd-a524-c6f280cda2cb-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"heddo :)","emoticons":[{"_id":"1","begin":6,"end":7}],"fragments":[{"text":"heddo "},{"text":":)","emoticon":{"emoticon_id":"1","emoticon_set_id":""}}],"is_action":false,"user_badges":[{"_id":"vip","version":"1"},{"_id":"subscriber","version":"6"},{"_id":"bits","version":"1000"}],"user_color":"#00FF7F"},"more_replies":false},{"_id":"f02243ba-7109-4561-9fcf-251ea8a3ff76","created_at":"2019-02-06T18:26:50.785Z","updated_at":"2019-02-06T18:26:50.785Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":255.085,"commenter":{"display_name":"golfarn","_id":"154985355","name":"golfarn","type":"user","bio":null,"created_at":"2017-04-28T22:48:12.649571Z","updated_at":"2019-02-20T22:32:12.696331Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/88c320dd-c279-42a2-abb1-3509139b43aa-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"HEJOOO nymnOkay","emoticons":[{"_id":"934675","begin":7,"end":14}],"fragments":[{"text":"HEJOOO "},{"text":"nymnOkay","emoticon":{"emoticon_id":"934675","emoticon_set_id":""}}],"is_action":false,"user_badges":[{"_id":"subscriber","version":"0"},{"_id":"bits-charity","version":"1"}],"user_color":"#FB00FF"},"more_replies":false},{"_id":"93a38c2f-93f3-4fea-b580-4a322e790897","created_at":"2019-02-06T18:27:00.282Z","updated_at":"2019-02-06T18:27:00.282Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":264.582,"commenter":{"display_name":"enett_","_id":"169870938","name":"enett_","type":"user","bio":null,"created_at":"2017-08-14T17:12:32.948781Z","updated_at":"2019-02-16T21:11:19.872686Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/d6df7b53-6f66-4d4f-b6db-ea28714c17df-profile_image-300x300.jpg"},"source":"chat","state":"published","message":{"body":"HEJOOO","fragments":[{"text":"HEJOOO"}],"is_action":false},"more_replies":false},{"_id":"db8ccd92-898a-4a45-917e-a338739af461","created_at":"2019-02-06T18:27:34.269Z","updated_at":"2019-02-06T18:27:34.269Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":298.569,"commenter":{"display_name":"Eclips3tv","_id":"177243225","name":"eclips3tv","type":"user","bio":null,"created_at":"2017-10-10T18:35:05.378892Z","updated_at":"2019-02-20T19:22:12.214121Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/e4263564-6ab2-47fd-a524-c6f280cda2cb-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"apex? PartyParrot","fragments":[{"text":"apex? PartyParrot"}],"is_action":false,"user_badges":[{"_id":"vip","version":"1"},{"_id":"subscriber","version":"6"},{"_id":"bits","version":"1000"}],"user_color":"#00FF7F"},"more_replies":false},{"_id":"469de973-b78e-4485-84e9-3804fca209f9","created_at":"2019-02-06T18:27:43.636Z","updated_at":"2019-02-06T18:27:43.636Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":307.936,"commenter":{"display_name":"Qiio","_id":"188064613","name":"qiio","type":"user","bio":"[ITA//ENG//SPA] Rising Streamer full of mad ideas |◔◡◉|","created_at":"2017-12-30T20:08:25.700146Z","updated_at":"2019-02-20T17:50:48.904111Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/f2106422-63b5-4c2c-b3c1-f0002a49a0b2-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"PartyParrot","fragments":[{"text":"PartyParrot"}],"is_action":false,"user_badges":[{"_id":"premium","version":"1"}],"user_color":"#DAA520"},"more_replies":false},{"_id":"607eb9d8-6b66-4a0a-b3bd-b70044fdc5ab","created_at":"2019-02-06T18:27:57.206Z","updated_at":"2019-02-06T18:27:57.206Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":321.506,"commenter":{"display_name":"definitelyhonestlynotfeta","_id":"218337485","name":"definitelyhonestlynotfeta","type":"user","bio":null,"created_at":"2018-05-03T21:18:24.089913Z","updated_at":"2019-02-19T19:46:13.654084Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/38793c5a-d3a2-41e4-b345-21c120a3ff8c-profile_image-300x300.jpg"},"source":"chat","state":"published","message":{"body":"love dat ponytail still","fragments":[{"text":"love dat ponytail still"}],"is_action":false,"user_badges":[{"_id":"vip","version":"1"},{"_id":"subscriber","version":"6"}],"user_color":"#FF7300"},"more_replies":false},{"_id":"3407e5b5-5a57-4d74-84a8-05a89c07194c","created_at":"2019-02-06T18:27:57.533Z","updated_at":"2019-02-06T18:27:57.533Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":321.833,"commenter":{"display_name":"Eclips3tv","_id":"177243225","name":"eclips3tv","type":"user","bio":null,"created_at":"2017-10-10T18:35:05.378892Z","updated_at":"2019-02-20T19:22:12.214121Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/e4263564-6ab2-47fd-a524-c6f280cda2cb-profile_image-300x300.jpeg"},"source":"chat","state":"published","message":{"body":"Queeen Ari PogChamp","emoticons":[{"_id":"88","begin":11,"end":18}],"fragments":[{"text":"Queeen Ari "},{"text":"PogChamp","emoticon":{"emoticon_id":"88","emoticon_set_id":""}}],"is_action":false,"user_badges":[{"_id":"vip","version":"1"},{"_id":"subscriber","version":"6"},{"_id":"bits","version":"1000"}],"user_color":"#00FF7F"},"more_replies":false},{"_id":"d343ea31-abd9-41c2-9872-1f60cf26357b","created_at":"2019-02-06T18:28:01.029Z","updated_at":"2019-02-06T18:28:01.029Z","channel_id":"104939804","content_type":"video","content_id":"376156249","content_offset_seconds":325.329,"commenter":{"display_name":"samuvaa","_id":"126636072","name":"samuvaa","type":"user","bio":null,"created_at":"2016-06-12T20:17:24.475086Z","updated_at":"2018-12-06T08:11:20.127314Z","logo":"https://static-cdn.jtvnw.net/user-default-pictures/0ecbb6c3-fecb-4016-8115-aa467b7c36ed-profile_image-300x300.jpg"},"source":"chat","state":"published","message":{"body":"hello","fragments":[{"text":"hello"}],"is_action":false},"more_replies":false}]]

Здесьэто отображение, которое я делаю, но, похоже, оно не отображает все.

getComments(){
if(!this.state.value)
{
  const msg = 'This worked...';
}
else{
   let api = 'https://api.twitch.tv/v5/videos/'+ this.state.value +'/comments?client_id='+ this.state.cid +'&cursor='+this.state.after+'&limit=10000';
   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
          let next = JSON.parse(responseText)._next;

          if(next){
            this.setState({
             hits : [...this.state.hits, JSON.parse(responseText).comments],
             after : next });

             this.getComments()
          }
          else{
            this.mergeArrays(this.state.hits);
          }
       } else {

          return ;
       }

    });
  }
}

mergeArrays(arrays){
  const flattened = [].concat(...arrays);
  this.setState({
    hits : flattened
  })
}

 <div id="resultsForm">
     { hits && hits.comments && hits.comments.length !== 0 ?
          hits.comments.map(hit =>
            <span className="d-block">[{this.convertSeconds(hit.content_offset_seconds)}] - {hit.message.body}</span>
          )
          :
            <div className="text-center">No Comments Found</div>
      }
  </div>

Я пытаюсь получить полный список всего содержимого (объектов) в массиве.Мы будем благодарны за любую помощь.

В этом случае 'hit' - это состояние, содержащее многомерный массив

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...