.data()返回undefined

时间:2018-05-16 08:49:23

标签: javascript jquery json undefined

这是我的代码:

$.getJSON("link here", function (result) {
    $.each(result, function (i, value) {
        $('.usersOfGroupList').append($("<li id='userElement' data-userId='' ></li>").data('userIdFromGroups', value.Id).html(value.FirstName + " " + value.LastName));
        console.log($(".usersOfGroupList").data());
    });
});

data-method中的值是正确存储数据但是当我尝试在我的控制台中记录这个值时,当我只想要D的值时,我得到了整个javascript-object。我也尝试过使用密钥像这样:

console.log($(".usersOfGroupList").data("userIdFromGroups"));

但这只是给了我一个

  

未定义误差

2 个答案:

答案 0 :(得分:3)

id每个元素必须是唯一的,因此请从id中移除li属性。

由于您要向新创建的li添加数据属性,因此您需要使用li作为选择器,:eq(index)每次都能获得正确的li

如下所示: -

console.log($(".usersOfGroupList li:eq("+i+")").data('userIdFromGroups'));

示例硬编码代码段: -

result = [{'Id':1,'FirstName':'A','LastName':'B'},{'Id':2,'FirstName':'C','LastName':'D'}];


$.each(result, function (i, value) {
  $('.usersOfGroupList').append($("<li data-userId='' ></li>").data('userIdFromGroups', value.Id).html(value.FirstName + " " + value.LastName));
  console.log($(".usersOfGroupList li:eq("+i+")").data('userIdFromGroups'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="usersOfGroupList">

所以完整代码需要: -

$.getJSON("link here", function (result) {
    $.each(result, function (i, value) {
        $('.usersOfGroupList').append($("<li data-userId='' ></li>").data('userIdFromGroups', value.Id).html(value.FirstName + " " + value.LastName));// remove repetitive id
        console.log($(".usersOfGroupList li:eq("+i+")").data('userIdFromGroups')); // use index i to get correct li data
    });
});

答案 1 :(得分:0)

您似乎已将数据提供给<li>下新创建的.usersOfGroupList,因此您必须使用以下内容正确获取该数据

$("#userElement").data("userIdFromGroups")

此外,在上面的代码中,您似乎正在创建具有类似ID的多个元素,这是非常糟糕的做法。从理论上讲,如果只有一个<li>,它就可以工作。

如果它没有,那意味着您对异步操作有一些不好的处理。

由于您正在使用异步函数来获取数据,因此只能在所需元素上设置数据属性。与此同时,您的代码继续运行并尝试检索(但未设置)数据属性。