Javascript data.sort未定义或data.sort不是函数_Javascript_Jquery_Json_Ajax

Javascript data.sort未定义或data.sort不是函数

javascript jquery json ajax

Javascript data.sort未定义或data.sort不是函数,javascript,jquery,json,ajax,Javascript,Jquery,Json,Ajax,我在HTML页面上以表格形式显示JSON数据，我想按字母顺序（标题）对按钮单击上的数据进行排序。单击按钮后，我得到一个错误，即data.sort未定义或data.sort不是函数。排序功能不需要重新加载页面。我正在删除代码的开头以使其更短 <!DOCTYPE html> <html> <body> <div class="container"> <div class="table-res

我在HTML页面上以表格形式显示JSON数据，我想按字母顺序（标题）对按钮单击上的数据进行排序。单击按钮后，我得到一个错误，即data.sort未定义或data.sort不是函数。排序功能不需要重新加载页面。我正在删除代码的开头以使其更短

<!DOCTYPE html>
    <html>
      <body>
        <div class="container">
          <div class="table-responsive">
            <h1>TOP MOVIES</h1>
            <button id="btn-sort">Sort</button>
            <br />
            <table class="table table-bordered table-striped" id="movie_table">
              <tr>
                <th>Title</th>
                <th>IMDB-ID</th>
                <th>RANK</th>
                <th>RATING</th>
                <th>RATING-COUNT</th>

                      </tr>
            </table>
        </div>
        </div>

      </body>
    </html>
    <script>
    $(document).ready(function() {
      $.getJSON("https://api.jsonbin.io/b/5dc2e815c9b247772abb67b2/1", function(data) {
        var movie_data = '';
        $.each(data.movies, function(key, value) {
          movie_data += '<tr>';
          movie_data += '<td>' + value.title + '</td>';
          movie_data += '<td>' + value['imdb-id'] + '</td>';
          movie_data += '<td>' + value.rank + '</td>';
          movie_data += '<td>' + value.rating + '</td>';
          movie_data += '<td>' + value['rating-count'] + '</td>';
          movie_data += '<tr>';
        });
        $('#movie_table').append(movie_data);
      });

      $("#btn-sort").click(function(data) {
        data.sort(function(a,b) {
          return a.title < b.title ? -1 : 1;
        });
        var movie_data = '';
        $.each(data.movies, function(key, value) {
          movie_data += '<tr>';
          movie_data += '<td>' + value.title + '</td>';
          movie_data += '<td>' + value['imdb-id'] + '</td>';
          movie_data += '<td>' + value.rank + '</td>';
          movie_data += '<td>' + value.rating + '</td>';
          movie_data += '<td>' + value['rating-count'] + '</td>';
          movie_data += '<tr>';
        });
        $('#movie_table').slice(1).remove(); // To remove everything except first row
        $('#movie_table').append(movie_data);
      });

    });
    </script>


顶级电影
分类


标题
IMDB-ID
等级
评级
评级计数
$（文档）.ready（函数（）{
$.getJSON（“https://api.jsonbin.io/b/5dc2e815c9b247772abb67b2/1，函数（数据）{
var\u数据=“”；
$.each（data.movies、函数（键、值）{
电影_数据+=''；
电影_数据+=''+值.title+''；
电影数据+=''+值['imdb-id']+''；
电影_data+=''+value.rank+''；
电影_数据+=''+值.rating+''；
电影数据+=''+值['rating-count']+''；
电影_数据+=''；
});
$（'movie_table'）。追加（movie_数据）；
});
$（“#btn排序”）。单击（函数（数据）{
数据排序（函数（a，b）{
返回a.title

您可以对代码执行许多操作

例如：

1）将

和

添加到HTML表中，这样您只需要在数据更改时更新正文

2）用于加载数据。这样，您就可以轻松地维护全局数据存储

3）覆盖数据集并返回行数据的一部分

4）为可重用代码添加函数

//将'async'添加到封闭函数中
$（文档）.ready（异步函数（）{
常数端点https://api.jsonbin.io/b/5dc2e815c9b247772abb67b2/1';
//等待您的数据。`getJSON`是一个类似promise的结构，因此您可以在其上使用`Await`
//我们可以从数据中解构movies属性
const{movies}=await$.getJSON（端点）；
//因为您正在重用一些代码，所以可以将其放入函数中并调用它
//每次都有一组新的数据
函数getTableHTML（电影）{
//'map'将返回一个新数组，因此请确保
//`join`将它放在最后，形成一个完整的HTML字符串
return$.map（电影，函数（电影，索引）{
返回`
${movie.title}
${movie['imdb-id']}
${movie.rank}
${movie.rating}
${movie['rating-count']}
`
}).加入（“”）；
}      
//获取电影HTML
consttablehtml=getTableHTML（电影）；
//将其添加到表体中
$（'#movie_table tbody'）.html（tableHTML）；
//我已分离出排序函数
功能sortMovies（电影）{
返回电影。排序（函数（a，b）{
返回a.title

顶级电影
分类


标题
IMDB-ID
等级
评级
评级计数
Function event click返回一个事件作为参数，而不是您想要排序的数据，您的click函数将返回一个事件对象，查看中的click事件：您需要一个全局变量（不是最佳做法）并存储从$.getJSON返回的数据。然后使用变量进行排序。单击事件中的数据与ajax块中的数据不同。它们的名称是相同的，因此存在混淆，但范围不同。