角度转换JSON到数组中建模和存储

Question

我似乎在将返回的JSON映射到对象数组时遇到了问题。下面是我希望被转换成一个对象并放入一个数组的JSON。

{ danceability: 0.653,
  energy: 0.59,
  key: 5,
  loudness: -9.649,
  mode: 1,
  speechiness: 0.104,
  acousticness: 0.000942,
  instrumentalness: 0.378,
  liveness: 0.2,
  valence: 0.625,
  tempo: 168.054,
  type: 'audio_features',
  id: '7bsPIUEEOuL5WlOPcYUrYx',
  uri: 'spotify:track:7bsPIUEEOuL5WlOPcYUrYx',
  track_href: 'https://api.spotify.com/v1/tracks/7bsPIUEEOuL5WlOPcYUrYx',
  analysis_url: 'https://api.spotify.com/v1/audio-analysis/7bsPIUEEOuL5WlOPcYUrYx',
  duration_ms: 293307,
  time_signature: 4 }

这是我的对象接口。它叫SpotifyAudioFeatures

export interface SpotifyAudioFeatures {
  danceability: number;
  energy: number;
  key: number;
  loudness: number;
  mode: number;
  speechiness: number;
  acousticness: number;
  instrumentalness: number;
  liveness: number;
  valence: number;
  tempo: number;
  type: string;
  id: string;
  uri: string;
  track_href: string;
  analysis_url: string;
  duration_ms: number;
  time_signature: number;
  }

我的服务类和方法是：

getAudioFeatures(tracks): Observable<SpotifyAudioFeatures[]>{
    return this.httpClient.post<SpotifyAudioFeatures[]>('http://localhost:3000/getAudioFeatures', 
    {
      'tracks' :tracks
    }
    ).pipe(catchError(this.handleError));
  }

我在component.ts上的方法是：

  spotifyAudioFeaturesArray : SpotifyAudioFeatures[];


    getAudioFeatures(track){
        this.spotifyService.getAudioFeatures(track).subscribe(
          (data) => {
            console.log(data);  //I can see the JSON printed here
            this.spotifyAudioFeaturesArray = data;           
          },
          (err) => console.log(err)
        );
          console.log(this.spotifyAudioFeatures)  //This shows up as undefined   
      }

我不知道为什么数组'spotifyAudioFeaturesArray‘返回空白？我看过一些教程，其中大多数都填充了数组，但没有填充在我的教程中。不知道我错过了什么？

Answer 1

• console.log实际上是执行第一个的，这是因为异步性质的可观测性和.subscribe函数。
• this.spotifyAudioFeaturesArray = data;在POST请求之后执行(在第二个console.log之后)
• 因为您没有初始化它，所以spotifyAudioFeaturesArray : SpotifyAudioFeatures[];还没有保存任何值。因此，打印undefined

Answer 2

假设console.log(this.spotifyAudioFeatures)是唯一检查它的地方，这可能是spotifyService.getAudioFeatures()函数异步特性的结果。

由于可观察到的异步特性，JS调用this.spotifyService.getAudioFeatures()，但不等待结果，然后转到console.log(this.spotifyAudioFeatures)。

由于getAudioFeatures()尚未完成执行，所以this.spotifyAudioFeatures仍未定义。

要修复它，请尝试将console.log放在this.spotifyAudioFeaturesArray = data;之后

如下所示：

getAudioFeatures(track){
    this.spotifyService.getAudioFeatures(track).subscribe(
      (data) => {
        console.log(data);
        this.spotifyAudioFeaturesArray = data;
        console.log(this.spotifyAudioFeatures);       // here   
      },
      (err) => console.log(err)
    );
}

Answer 3

在实际填充spotifyAudioFeaturesArray之前，您正在记录它的内容，因为getAudioFeatures是一个异步请求。您的代码工作正常，您的console.log语句位于错误的位置。

将console.log语句移动到subscribe块中，它应该正确地记录内容。

getAudioFeatures(track) {
  this.spotifyService.getAudioFeatures(track).subscribe(
    (data) => {
      console.log(data);
      this.spotifyAudioFeaturesArray = data;
      console.log(this.spotifyAudioFeatures);           
    },
    (err) => console.log(err)
  );
}