你好，首先请允许我为下面的任何拼写错误或任何东西说声抱歉，我患有阅读障碍和其他学习障碍，我确实试图抓住尽可能多的我可以，但不是所有的方式100％，我只是试图学习新的东西，在这个锁定。
这是我第一次用jquery工作，我遇到了一些问题，还在试图把我的脑袋绕过很多东西，我在这里搜索了一下，看到了一些帖子，所以很抱歉，如果这个问题之前已经被问过了，我只是想找一个可以帮助我理解的人。
基本上，我有一个本地的api，它可以发出请求，并将远程xml api的响应转换成json，我试图使用jquery和javascript来捕捉和显示json，并将其转化为html内容，以便添加到我的页面中。
首先，我尝试使用下一个请求，但这是不工作的第一个请求工作正常，但没有等待后面的请求完成之前添加内容到页面，这导致部分内容。
然后我试着在第一个请求中运行一个函数，但结果还是只有部分输出，我只能猜测是因为第二个函数没有被等待
这是我目前有以下我已经搜索并找到了层级和等待的主题，但不是100％确定我理解他们。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var ITEMS = "";
function GetMovies(USERNAME, PASSWORD, ID) {
var Movies = "";
var URL = "http://localhost/api.php?username=" + USERNAME + "&password=" + PASSWORD + "&action=MOVIES&id=" + ID;
$.getJSON(URL).done(function(RESULT) {
$.each(RESULT.items, function(i, item) {
var MOVIE_ID = item.id;
var MOVIE_NAME = item.name;
var MOVIE_POSTER = item.poster;
$( "#root" ).append( '<div class="movie" data-id="'+MOVIE_ID+'" onclick="PlayMedia(this);" data-toggle="modal" data-target="#myModal">' );
$( "#root" ).append( '<img class="logo" src="'+MOVIE_POSTER+'" alt="'+MOVIE_NAME+'">' );
$( "#root" ).append( '</div>' );
});
});
return Movies;
}
$(document).ready(function() {
var genres = {};
var XUSERNAME = 'Test010';
var XPASSWORD = 'Test010';
var ACTION = 'MGENRES';
var ID = 0;
var APIURL = "http://localhost/api.php?username=" + XUSERNAME + "&password=" + XPASSWORD + "&action=" + ACTION + "&id=" + ID;
$.getJSON(APIURL).done(function(RESULT) {
$.each(RESULT.items, function(i, item) {
var GENRE_ID = item.id;
var GENRE_NAME = item.name;
$( "#root" ).append( '<p class="p">'+ GENRE_NAME +'</p>' );
$( "#root" ).append( '<div class="reels">' );
$( "#root" ).append( '<div class="starter"></div>' );
GetMovies(XUSERNAME, XPASSWORD, GENRE_ID);
$( "#root" ).append( '<div class="spacer"></div>' );
$( "#root" ).append( '</div>' );
$( "#root" ).append( '<div class="starter"></div>' );
});
$( "#root" ).append( '<p class="p"></p>' );
});
console.log(genres);
});
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
function GetMovies(USERNAME, PASSWORD, ID, GENRE_NAME) {
var URL = "http://localhost/api.php?username=" + USERNAME + "&password=" + PASSWORD + "&action=MOVIES&id=" + ID;
return $.getJSON(URL).done(function(RESULT) {
$( "#root" ).append( '<p class="p">'+ GENRE_NAME +'</p>' );
$( "#root" ).append( '<div class="reels">' );
$( "#root" ).append( '<div class="starter"></div>' );
$.each(RESULT.items, function(i, item) {
var MOVIE_ID = item.id;
var MOVIE_NAME = item.name;
var MOVIE_POSTER = item.poster;
$( "#root" ).append( '<div class="movie" data-id="'+MOVIE_ID+'" onclick="PlayMedia(this);" data-toggle="modal" data-target="#myModal">' );
$( "#root" ).append( '<img class="logo" src="'+MOVIE_POSTER+'" alt="'+MOVIE_NAME+'">' );
$( "#root" ).append( '</div>' );
});
$( "#root" ).append( '<div class="spacer"></div>' );
$( "#root" ).append( '</div>' );
$( "#root" ).append( '<div class="starter"></div>' );
});
}
$(document).ready(function() {
var genres = {};
var XUSERNAME = 'Test010';
var XPASSWORD = 'Test010';
var ACTION = 'MGENRES';
var ID = 0;
var APIURL = "http://localhost/api.php?username=" + XUSERNAME + "&password=" + XPASSWORD + "&action=" + ACTION + "&id=" + ID;
$.getJSON(APIURL).done(function(RESULT) {
Promise.all(RESULT.items.map((item, i) => {
var GENRE_ID = item.id;
var GENRE_NAME = item.name;
return GetMovies(XUSERNAME, XPASSWORD, GENRE_ID, GENRE_NAME);
})).then((res)=>{
console.log(genres);
$( "#root" ).append( '<p class="p"></p>' );
});
});
});