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

【问题标题】：Save data from Ajax call about artist on page, but only once for a particular artist保存来自页面上关于艺术家的 Ajax 调用的数据，但对于特定的艺术家只保存一次
【发布时间】：2021-01-21 13:38:14
【问题描述】：

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

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;
            }
        }

【问题讨论】：

标签： javascript jquery ajax api spotify

【解决方案1】：

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

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

}).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');
    }
  })

【讨论】：