首页 > 解决方案 > 在jQuery中动态添加元素后无法获取字典的长度

问题描述

首先,我使用 ajax 通过添加到我在 ajax 之前声明的 dict 变量来接受 JSON 数据。

我想得到字典的长度,但这里是输出:

输出

并且 dict 输出旁边的消息显示“刚刚评估了下面的值”:

消息

这是我的代码:

<script>
    $(function () {
        var table_id = $('#table_id').text();
        var list_length = $.words_list(table_id);
    });

    //function
    jQuery.extend({
        'words_list': function (id) {
            var send_list = {};
            $.ajax({
                type: 'GET',
                url: '/get_wordslist/' + id,
                success: function (returnData) {
                    $.each(returnData, function (item, value) {
                        send_list[item] = value;
                    });
                }
            });
            console.log(send_list);
            console.log('length:' + Object.keys(send_list).length);
            return 1;//just for returning
        }
    });
</script>

根据消息,我认为我需要使用另一个变量来记录长度,如下所示:

<script>    
$(function () {
        var table_id = $('#table_id').text();
        var list_length = $.words_list(table_id);
    });

    jQuery.extend({
        'words_list': function (id) {
            var send_list = {};
            var list_length = 0;// add a variable

            $.ajax({
                type: 'GET',
                url: '/get_wordslist/' + id,
                success: function (returnData) {
                    $.each(returnData, function (item, value) {
                        send_list[item] = value;
                        list_length++;//record increase
                    });
                }
            });
            console.log(send_list);
            console.log('length:' + list_length);//show
            return 1;//just for returning
        }
    });
</script>

但是输出是一样的。我与这样的简单代码进行比较:

var dict = {
    "Jeremy": 20,
    "Jimmy": 30
};
console.log(dict);
console.log(Object.keys(dict).length);

这是输出:

示例输出

这是我的预期结果。根据消息,我认为动态添加元素到 dict 是问题的原因。但是我尝试使用变量来记录长度,也失败了。现在我不知道如何解决这个问题。请帮助我并告诉我原因,首先谢谢。

标签: jquerydictionarykey-value

解决方案


因为 ajax 是异步的,所以在你的时候console.log('length:' + list_length);,success 函数还没有运行。要获得预期的结果,您需要登录成功功能。像这样的东西:

var send_list = {};
var list_length = 0;// add a variable

$.ajax({
   type: 'GET',
   url: '/get_wordslist/' + id,
   success: function (returnData) {
      $.each(returnData, function (item, value) {
         send_list[item] = value;
         list_length++;//record increase
      });
      // Log here
      console.log(send_list);
      console.log('length:' + list_length);
   }
});

推荐阅读