Question

我正在建立一个带有API的网站，以收集艺术家/歌曲信息（MusixMatch）以及YouTube API。我的目标是为每个搜索结果输出特定数据到屏幕，并显示相关的YouTube视频。每个结果的格式都很好，第一个AJAX调用正确输出。问题是我已经在MusixMatch API中嵌套了Youtube API，以便我可以使用艺术家数据运行视频搜索查询。这工作正常，我可以显示视频，但由于某种原因，我不能让它显示在我为每个结果创建的div中。

$.ajax({
       type: "GET",
        data: {
            apikey:"85f6c6b42df5d50c164d2e47183cb357",
            q_track: songSearch,
            f_has_lyrics: 1,
            s_artist_rating: "desc",
            s_track_rating: "desc",
            format:"jsonp",
            callback:"jsonp_callback"
        },
        url: "https://api.musixmatch.com/ws/1.1/track.search",
        dataType: "jsonp",
        jsonpCallback: 'jsonp_callback',
        contentType: 'application/json',
        success: function(data) {
            console.log(data);
            var live = 'Live';
            var remaster = 'Remaster';
            var edit = 'Edit';
            var myHTML = '';
            for (var i = 0; i < data.message.body.track_list.length; i++) {

                if ((data.message.body.track_list[i].track.track_name).search(live) > 0 || (data.message.body.track_list[i].track.track_name).search(remaster) > 0 || (data.message.body.track_list[i].track.track_name).search(edit) > 0){

                    continue;
                }

                myHTML += '<li class="artistName list-group-item">';
                myHTML += '<span class="name">' + data.message.body.track_list[i].track.track_name + '</span></br>';
                myHTML += '<span class="rating">Artist Name: ' + data.message.body.track_list[i].track.artist_name + '</span></br>';

                $('#song_output').append(myHTML);
                myHTML = '';

                $.ajax({
                       type: "GET",
                        data: {
                            part: "snippet",
                            key: 'AIzaSyBYLyCoBwVBnxICX2w38cnO_kkoQzW09Ko',
                            maxResults: 1,
                            q: data.message.body.track_list[i].track.track_name + ' ' +  data.message.body.track_list[i].track.artist_name ,
                        },
                        url: "https://www.googleapis.com/youtube/v3/search",
                        dataType: "JSON",
                        contentType: 'application/json',
                        success: function(data) {
                            console.log(data);
                            var video = 'data.items[0].id.videoId';
                            postVideo(video);

                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);
                        },
                        complete: function(){
                        }

            })
              function postVideo(video){
                  myHTML += '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + video + '" frameborder="0" allowfullscreen></iframe></br>';
                 myHTML += '</div>'
                myHTML += '</li>';
              }  

            }
            $('#song_output').append(myHTML);

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        complete: function(){
             $("#ajaxIndicator").modal('hide');
        }

            })

很抱歉，如果这还不够，但如果需要，我可以提供更多信息。有没有人知道什么可能导致显示在div之外，而不是在它内部显示尽管它在其中输出？

嵌套的Ajax调用无法正确输出数据

0 个答案: