Question

我正在尝试从Youtube API中获取数据。我正在使用2个请求，一个用于视频列表，一个用于每个视频的详细信息。

我的第一个请求有效，我显示了4个带有缩略图，标题等的视频... 为了获得每个视频的更多信息，我在第一个API调用中尝试了一个foreach循环：

这是我的 service.ts

    export class YoutubeDataService {

      constructor(private http: HttpClient) { }

      getList() {
         return this.http.get('https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCiRDO4sVx9dsyMm9F7eWMvw&order=date&maxResults=4&type=video&key={MY_KEY}')
      }

      getViews(id) {
         return this.http.get('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id + '&key={MY_KEY}');
      }
   }

这是我的 component.ts

    export class VideosComponent implements OnInit {

      videos: Object;
      items = [];
      views: Object;

      constructor(private youtube: YoutubeDataService) { }

      ngOnInit() {
         this.youtube.getList().subscribe(data => {
            this.videos = data.items;
            console.log(this.videos);
            this.videos.forEach(element => {
               this.youtube.getViews(element.id.videoId).subscribe(data2 => {
                  this.views = data2.items[0].statistics.viewCount;
                  console.log(this.views);
               });
            });
         });
      }

    }

还有我的 component.html

    <div class="video col-xl-5" *ngFor="let video of videos.items">
       <a class="row" href="https://www.youtube.com/watch?v={{video.id.videoId}}">
          <img [src]="video.snippet.thumbnails.medium.url">
          <div class="col"> 
             <h3 class="titre">{{ video.snippet.title }}</h3>
             // Here I'd like to display infos I can only get from the second API call
             <p class="description">{{ video.snippet.description }}</p>
          </div> 
       </a>
    </div>

在这里，代码按预期显示了标题，缩略图和说明，而我的console.log(this.views);显示了每个视频的视图，但是我找不到如何管理它。

更新

我知道我只需要将数据推送到数组中并在html中用索引显示它： component.ts

    this.youtube.getList().subscribe(data => {
       this.videos = data.items;
       this.videos.forEach(element => {
          this.youtube.getViews(element.id.videoId).subscribe(data2 => {
             this.array.push(data2.items[0].statistics.viewCount);
          });
       });
    });

但是我遇到了一个新问题：观看次数不是按视频排序的。每次刷新页面时，它都会以不同的顺序显示4个观看次数。有办法解决这个问题吗？

Answer 1

您已经在运行第一个HTTP调用“ getList” ...您正在使用forEach遍历结果并获取视图计数...这一切都很好。

当您调用第二个HTTP调用“ getViews（id）”时，请确保将结果与VideoId的引用一起存储；这样，您可以简单地使用* ngIf在准备好结果时显示结果...

HTML

<div *ngFor="let video of videos">
  <p> ID# {{video.videoId}}: {{video.title}} "{{video.description}}"</p>
  <div *ngFor="let viewership of views">
    <span *ngIf="viewership.videoId == video.videoId"> number of views: {{viewership.viewCount}} </span>
  </div>
</div>

相关TS：

this.videos.forEach(element =>{
  this.views.push({ "videoId":element.videoId, "viewCount": this.getViews(element.videoId) });
});

要进行工作演示，请参加look here-快乐学习！

Answer 2

如果我理解您的意思，就是您想从第一个请求中获取响应并将其传递给第二个响应...如果这就是您的意思，那么您可以轻松地使用request为此...例如

fetchRequest(){

  request(`FIRST_URL`,function (error, response, body){

  //error logging
  console.log('first request error:', error);

  var firstRes = JSON.parse(body)

     request(`SECOND_URL_WITH_FIRST_RES__${firstRes}`,function (error, response, body){

     //error logging
     console.log('Second request error:', error);

     var secondRes= JSON.parse(body)

     return secondRes
     }
  }

}

在另一个API调用中显示来自API调用的数据

2 个答案: