Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

Question

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

Utilizing Spotify's API search feature, I am working with an array of SongSearchParams that consist of title and artist parameters:

export class SongSearchParams {
    public title: string;
    public artist: string;

    constructor(title: string, artist: string){
        this.title = title;
        this.artist = artist;
    }
}

The HTTP request structure is as follows:

  searchTrack(searchParams: SongSearchParams, type='track'){
    var headers = new Headers({'Authorization': 'Bearer ' + this.hash_params.access_token});
    this.user_url = "https://api.spotify.com/v1/search?query="+searchParams.artist+' '+
                    searchParams.title+"&offset=0&limit=1&type="+type+"&market=US";

    return this.http.get(this.user_url, {headers : headers})
      .map(res => res.json());
  }

Within a TypeScript file of one of my components, I have access to the SongSearchParams array. When a specific button is clicked, I aim to pass each element of this array through the searchTrack function to fetch details like album image, track name, and artist of a song.

onClick(){
  for(let searchQuery of this.songService.songSearches){ 
    this.spotifyserv.searchTrack(searchQuery)
      .subscribe(res => {
        this.searchedSong.artist = res.tracks.items[0].artists[0].name;
        this.searchedSong.title = res.tracks.items[0].name;
        this.searchedSong.imagePath = res.tracks.items[0].album.images[0].url;
        console.log(this.searchedSong);
        this.songService.addSong(this.searchedSong);
      })
  }
}

Upon execution of this code, it seems only the last song in the array is persistently stored despite logging all songs correctly during iterations.

To resolve this issue, some resources suggest utilizing Promises sequentially via the then() method. Therefore, I attempted to incorporate this into the searchTrack functionality:

A potential problem could lie within my addSong function implementation:

addSong(song: Song){
    this.songs.push(song);
    this.songsChanged.next(this.songs.slice());
}

If the above function appears correct, considering another approach like chaining promises might be beneficial (despite failed attempts).

javascript typescript asynchronous xmlhttprequest angular-promise

Answer 1

Answer №1

In my opinion, exploring the forkjoin method could be helpful.

Here's a potential implementation:

let queryArray = [];

for(let term of this.musicService.searchTerms) {
    queryArray.push(this.spotifyService.findTrack(term));
}

Observable.forkJoin(queryArray)
    .subscribe(data => {
        // data[0]
        // data[1]
        // ...
        // data(n)
    });

Answer 2

In my opinion, exploring the forkjoin method could be helpful.

Here's a potential implementation:

let queryArray = [];

for(let term of this.musicService.searchTerms) {
    queryArray.push(this.spotifyService.findTrack(term));
}

Observable.forkJoin(queryArray)
    .subscribe(data => {
        // data[0]
        // data[1]
        // ...
        // data(n)
    });

Answer 3

Answer №2

After some trial and error, I managed to find a solution to my issue even though the exact reason behind it remains unclear (I can only speculate).

In the onClick() method of my class, there was a private member named songSearched of type Song which I was attempting to update for each song added to the list. Instead, I decided to modify the function as follows:

onClick(){
  for(let searchQuery of this.songService.songSearches){ 
    this.spotifyserv.searchTrack(searchQuery, 
          response => {
            let res = response.json();
            console.log(res.tracks.items[0].album.images[0].url);
            console.log(res.tracks.items[0].name);
            console.log(res.tracks.items[0].artists[0].name);
            let searched_song = {artist : null, title : null, imagePath : null}
            searched_song.artist = res.tracks.items[0].artists[0].name;
            searched_song.title = res.tracks.items[0].name;
            searched_song.imagePath = res.tracks.items[0].album.images[0].url;
            console.log(searched_song);
            //song_queue.push(searched_song);
            this.songService.addSong(searched_song);
          }
    )
  }
}

Instead of updating the same searched_song repeatedly, I created a new one within the function itself, ensuring that a separate searched_Song is available for each request. It seems that initially, I was overwriting the existing searchedSong, resulting in multiple searches being overwritten before being added to the list.

However, this does not clarify why the console log worked in the previous line during my initial attempt.

Answer 4

After some trial and error, I managed to find a solution to my issue even though the exact reason behind it remains unclear (I can only speculate).

In the onClick() method of my class, there was a private member named songSearched of type Song which I was attempting to update for each song added to the list. Instead, I decided to modify the function as follows:

onClick(){
  for(let searchQuery of this.songService.songSearches){ 
    this.spotifyserv.searchTrack(searchQuery, 
          response => {
            let res = response.json();
            console.log(res.tracks.items[0].album.images[0].url);
            console.log(res.tracks.items[0].name);
            console.log(res.tracks.items[0].artists[0].name);
            let searched_song = {artist : null, title : null, imagePath : null}
            searched_song.artist = res.tracks.items[0].artists[0].name;
            searched_song.title = res.tracks.items[0].name;
            searched_song.imagePath = res.tracks.items[0].album.images[0].url;
            console.log(searched_song);
            //song_queue.push(searched_song);
            this.songService.addSong(searched_song);
          }
    )
  }
}

Instead of updating the same searched_song repeatedly, I created a new one within the function itself, ensuring that a separate searched_Song is available for each request. It seems that initially, I was overwriting the existing searchedSong, resulting in multiple searches being overwritten before being added to the list.

However, this does not clarify why the console log worked in the previous line during my initial attempt.

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

Answer №1

Answer №2

Similar questions

The final thumbnail fails to appear in the visible display (react-responsive-carousel)

Declare that a method alters a value with state

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Substitute a JSONP API call using $.ajax() with a direct server-to-server API call

Access exclusive content by subscribing now!

The type 'Navigator' does not have the property 'userAgentData' in its definition

jQuery appears to be unresponsive or inactive

Creating a Star Rating System Using HTML and CSS

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

typescript ways to exclude enum values

Navigating to a Different Page in React Based on Button Click and Meeting Specific Conditions

Could Express be considered the most reliable and efficient application framework for NodeJS?

React is unable to assign a class field beyond the scope of axios

Struggling to import MUI components from node modules in your React JavaScript project using Vite? Discover why autosuggestion isn't getting the

TypeScript overloading error: Anticipated 0 parameters, received 2 instead

Display conceal class following successful ajax response

The 'resp' parameter is assumed to have an unspecified type, shown as 'any'. This is an error in Angular

When attempting to import my JSX file into page.js, I continue to encounter the error "module not found." How can I troubleshoot and resolve this issue in Visual Studio Code

Utilizing D3 to fetch geographic data in the form of a TopoJSON file for U.S. counties

Create a table by incorporating the information from the page along with additional content