保存来自 Ajax 次关于页面上艺术家的调用的数据，但仅针对特定艺术家一次

Question

我正在使用 Spotify REST API 和 JQuery 开发一个简单的单页应用程序，它允许用户搜索艺术家并在页面上保存艺术家的信息。但是应用程序应该只保存一次关于特定艺术家的信息（例如，不应该有 2x 甲壳虫乐队）。源代码如下。谢谢！

addButton.click(() => {
    // .....
    $.ajax({
        url: `${baseUrl}search?q=${searchQuery}&type=artist`,
        type: 'GET',
        datatype: 'json',
        headers: {
            'Authorization': 'Bearer ' + accessToken
        }
    }).done((resp) => {

        const rawArtistName = (resp.artists.items[0].name);
        const imageUrl = (resp.artists.items[0].images[0].url);
        const followers = (resp.artists.items[0].followers.total);
        const artistId = (resp.artists.items[0].id);

        const artistWrapper = $(`<div class ="artist-stats"><div>`);
        const artistImage = $(`<img src="${`${imageUrl}`}" alt="queen" width="200", height="200">`);
        const artistName = $(`<p id="nameNumber">${rawArtistName}</p>`);
        const artistFollowers = $(`<p> followers: ${followers} </p>`);
        const deleteArtist = $(`<button id="delete-button"> go away </button>`);


        artistList.append(artistWrapper);
        artistWrapper.append(artistImage);
        artistWrapper.append(artistName);
        artistWrapper.append(artistFollowers);
        artistWrapper.append(deleteArtist);

        
        const existingArtistNames = $(' #nameNumber')
    
// this is my attempt ->
        for (let i = 0; i < existingArtistNames.length; i++) {
            const existingArtistName = existingArtistNames[i].text();
            if ( something === something) {
                alert('artist is already here');
                return false;
            }
        }

Answer 1

不要在 .done 中使用任何 id，因为它会多次创建相同的 id...并且 id 必须是唯一的。请改用 class。

使用 class，您可以迭代先前创建的元素。见下文：

}).done((resp) => {

    const rawArtistName = (resp.artists.items[0].name);
    const imageUrl = (resp.artists.items[0].images[0].url);
    const followers = (resp.artists.items[0].followers.total);
    const artistId = (resp.artists.items[0].id);

    const artistWrapper = $(`<div class ="artist-stats"><div>`);
    const artistImage = $(`<img src="${`${imageUrl}`}" alt="queen" width="200", height="200">`);
    const artistName = $(`<p class="nameNumber">${rawArtistName}</p>`);
    const artistFollowers = $(`<p> followers: ${followers} </p>`);
    const deleteArtist = $(`<button class="delete-button"> go away </button>`);

    // Assuming it's not...
    let alreadyOnPage = false;
    // Check all the artist names
    $(".nameNumber").each(function(index,element){
      if($(element).text() === rawArtistName){
        // It found it!
        alreadyOnPage = true;
      }
    })

    // append the element only if not already on page
    if(!alreadyOnPage){

      artistList.append(artistWrapper);
      artistWrapper.append(artistImage);
      artistWrapper.append(artistName);
      artistWrapper.append(artistFollowers);
      artistWrapper.append(deleteArtist);
    }

    else{
      alert('artist is already here');
    }
  })

保存来自 Ajax 次关于页面上艺术家的调用的数据，但仅针对特定艺术家一次

Save data from Ajax call about artist on page, but only once for a particular artist

javascript

api

ajax

jquery

spotify