Javascript 嵌套Ajax调用未正确输出数据

我正在制作一个带有API的网站，以收集艺术家/歌曲信息（MusixMatch）以及YouTube API。我的目标是将每个搜索结果的特定数据输出到屏幕上，并显示相关的youtube视频。每个结果的格式都很好，第一个AJAX调用正确地输出结果。问题是我已经将Youtube API嵌套在MusixMatch 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');
        }

            })

$.ajax({
键入：“获取”，
数据：{
apikey:“85f6c6b42df5d50c164d2e47183cb357”，
q_曲目：songSearch，
f_的歌词是：1，
s_艺术家_评级：“描述”，
s_轨道等级：“描述”，
格式：“jsonp”，
回调：“jsonp_回调”
},
url:“https://api.musixmatch.com/ws/1.1/track.search",
数据类型：“jsonp”，
jsonpCallback:'jsonp_回调'，
contentType:'应用程序/json'，
成功：功能（数据）{
控制台日志（数据）；
var live=‘live’；
var remaster='remaster'；
var edit='edit'；
var myHTML=''；
对于（变量i=0；i0 |（data.message.body.track|list[i].track.track|name.search（remaster）>0 |（data.message.body.track|list[i].track.track|name.search（编辑）>0）{
继续；
}
myHTML+='
；
myHTML+=''+数据.message.body.track_列表[i].track.track_name+'
'；
myHTML+=“艺术家姓名：”+数据。消息。正文。曲目列表[i]。曲目。艺术家姓名+”
；
$（'song_output'）.append（myHTML）；
myHTML=''；
$.ajax({
键入：“获取”，
数据：{
部分：“片段”，
关键词：“Aizasybylycobwvbnxicx2w38cnokkoqzw09ko”，
结果：1，
q:data.message.body.track\u list[i].track.track\u name+''+data.message.body.track\u list[i].track.artist\u name，
},
url:“https://www.googleapis.com/youtube/v3/search",
数据类型：“JSON”，
contentType:'应用程序/json'，
成功：功能（数据）{
控制台日志（数据）；
var video='data.items[0].id.videoId'；
后期视频（视频）；
},
错误：函数（jqXHR、textStatus、errorshown）{
console.log（jqXHR）；
console.log（textStatus）；
console.log（错误抛出）；
},
完成：函数（）{
}
})
功能postVideo（视频）{
myHTML+='
'；
myHTML+=“”
myHTML+='
'；
}  
}
$（'song_output'）.append（myHTML）；
},
错误：函数（jqXHR、textStatus、errorshown）{
console.log（jqXHR）；
console.log（textStatus）；
console.log（错误抛出）；
},
完成：函数（）{
$（“#ajaxIndicator”）.modal（'hide'）；
}
})

---

对不起，如果这是不够的信息，但我可以提供更多，如果需要。有没有人知道是什么原因导致在div内部输出时，显示在div外部而不是内部？

这是因为ajax是异步的，您正在调用

$（“#song_output”）.append（myHTML）

假设

$.ajax

是syncrhonous@JaromandaX好的，我的想法是，对于每个搜索结果都要执行的每个循环，它将构建HTML div的开头，并将其设置为一个输出变量，然后我调用youtube api，它将获得视频url。设置嵌入代码并将其添加到输出代码中。然后我关上它。你的意思是，当这些步骤中的每一步都完成时，我需要交错，因为它是异步的吗filled@JaromandaX我已经删除了append的第一个实例，据我所知，在整个for循环运行并且myHTML变量已满之前，它不会追加。有什么想法它仍然没有显示？谢谢你的帮助。我真的很抱歉，因为代码的“格式”我以为你是“太快”附加的-我重新打开了这个问题