Javascript 使用API时如何显示数据？

我正在尝试使用ajax请求从API获取数据。我做了，但我不知道如何向客户显示信息。我想通过艺术家搜索并展示他们的歌曲。这是我的代码和api的链接。请帮帮我

音乐









搜寻
分类
艺术家：
搜寻
结果


夏奇拉
一些结果
一些结果
删除


$（文档）.ready（函数（）{
var api=“1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7”；
$（“#后命令”）。单击（函数（）{
艺人姓名=$（“#艺人”）.val（）；
控制台日志（artistName）；
变量设置={
“异步”：true，
“跨域”：正确，
“url”：”https://genius.p.rapidapi.com/search?q=“+艺人姓名，
“方法”：“获取”，
“标题”：{
“x-rapidapi-host”：“genius.p.rapidapi.com”，
“x-rapidapi-key”：“1f57380a81msh394cf453f4d1e73p1a0276jsnab0cd43f0df7”
}
}
$.ajax（设置）
.完成（功能（响应）{
日志（response.response.hits）；
response.response.hits.forEach（r=>{
变量最小值=$（'#cloneMe'）.clone（）；
最小属性（'id'，r.result.id）；
日志（r.result.header\u image\u url）；
miniMe.find（'img'）.attr（'src'，r.result.header\u image\u url）；
最小查找（'h4'）。文本（艺人姓名）；
miniMe.find（'#songName'）.html（r.result.full_title）；
miniMe.find（'#lyricsLink'）.html（r.result.url）；
最小值。查找（'按钮'）。单击（函数（）{
最小化。移除（）；
});
最小值。查找（'复选框'）。单击（函数（）{
})
miniMe.show（）；
$（'#contentList'）。追加（最小值）；
});               
});
返回false；
});
});

您可以使用它作为ajax块来迭代响应

$.ajax(settings)
        .done(function (response) {
            // sort the response alphabetically
            response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);

            response.response.hits.forEach(r => {
            var miniMe = $('#cloneMe').clone();
                miniMe.attr('id', r.result.id);
                miniMe.find('img').attr('src', r.result.header_image_url);
                miniMe.find('h4').text(artistName);
                miniMe.find('p').html(r.result.full_title);
                miniMe.find('button').click(function () {
                    miniMe.remove();
                });
                miniMe.show();
                $('#contentList').append(miniMe);
          });
        });

---

您可以在中看到正在运行的演示，您可以查看是否要了解

sort（）

函数以及它在JavaScript中的工作方式。

response.response有结果，您可以通过遍历对象数组来获得结果。您能给我一个示例吗。也许这是件简单而愚蠢的事情，但对我来说这是件新鲜事，尽管没有什么是简单而愚蠢的。当你尝试学习新事物时，当然会遇到一些错误。虽然这很正常，但我添加了一个答案，似乎可以解决您的问题。注意。对于这个api，是否可以添加按名称排序或其他内容？对response.response.hits数组进行排序非常容易。我已经更新了密码笔和答案，并进行了排序。哦，谢谢。如果我想给客户这个机会，我可以显示一个选项来排序数据吗？当然，你可以在布局上添加一个按钮，在该函数中，你可以给出一个参数true/false，根据参数你可以得到排序或不排序的结果。嗨，你知道如何添加另一个视图，例如，要通过单击按钮在网格中显示的数据

$.ajax(settings)
        .done(function (response) {
            // sort the response alphabetically
            response.response.hits.sort((a,b) => (a.result.full_title > b.result.full_title) ? 1 : (b.result.full_title > a.result.full_title) ? -1 : 0);

            response.response.hits.forEach(r => {
            var miniMe = $('#cloneMe').clone();
                miniMe.attr('id', r.result.id);
                miniMe.find('img').attr('src', r.result.header_image_url);
                miniMe.find('h4').text(artistName);
                miniMe.find('p').html(r.result.full_title);
                miniMe.find('button').click(function () {
                    miniMe.remove();
                });
                miniMe.show();
                $('#contentList').append(miniMe);
          });
        });