为什么我在地图箭头功能中总是收到未定义的错误？

Question

I recently just started on a project that utilizes Spotify API. I've been trying to extract artist's IDs with the code I wrote:

app.events = function() {
$('form').on('submit', function(e) {
    e.preventDefault();
    let artists = $('input[type=search]').val();
    artists = artists.split(',');
    let search = artists.map(artistName => app.searchArtist(artistName));
    $.when(...search)
        .then((...results) => {
            results = results.map(res => res[0].artists.items[0].id);
            console.log(results);
        });
});


app.searchArtist = (artistName) => $.ajax({
url: 'https://api.spotify.com/v1/search',
headers: {
    'Authorization': 'Bearer ' + accessToken
},
method: 'GET',
dataType: 'json',
data: {
    type: 'artist',
    q: artistName
}

The problem is with this line:

results = results.map(res => res[0].artists.items[0].id);

Every time I try to run the code, it returned res[0] is undefined, as shown like this in browser's console: res[0] undefined

The array that I'm trying to get is artist ID as shown: artist id

I don't know why it keeps getting the undefined error. I'm new to javascript and using API. What is the reason for this error? Help please.

Answer 1

The problem seems to be trying to access res[0] when there's no 0 key in res .

You should try this approach:

results = results.map(res => res.artists.items[0].id);

The way Array.prototype.map() works is by calling the specified function for each element in the array and returning the new array without modifying the original.