Не извлекает данные из объекта JQuery

Question

$(document).ready(function(){
var $body = $('body');

var index = streams.home.length - 1;
while(index >= 0){
  var tweet = streams.home[index];
  var $tweet = $('<div class = tweet></div>');
  var $user = $('<div class = users></div>');
  var $message = $('<div class = message></div>');
  var $time = $('<div class = time></div>');
  // $tweet.text('@' + tweet.user + ': ' + tweet.message + ' ' + tweet.created_at);
  $tweet.appendTo($('.tweets'));
  $time.text(tweet.created_at + '\n').appendTo($tweet);
  $user.text('@' + tweet.user + ': ').attr('username', tweet.user).appendTo($tweet);
  $message.text(tweet.message + ' ').appendTo($tweet);
  index -= 1;
}

//see user history by clicking on name
  //click event on name element
  //hide all other users that do not have the same username attribute?
$('.tweets').on('click', '.users', () => {
  var user = $(this).data('users');
  console.log(user);
})

Поэтому я пытаюсь извлечь данные из класса, когда нажимаю на него. Это включает в себя последние несколько строк моего кода. Данные, хранящиеся в моем .users, должны выдавать {someName: 'stringOfName"}, однако, когда я нажимаю на них, я получаю пустой объект {}. Что я делаю неправильно? Я добавляю данные в свой .users, и я четко вижу, как он отображается с информацией, поэтому я неправильно извлекаю данные из этого объекта?

Answer 1

$(this).data('users'); будет получать информацию из атрибута данных, названного «пользователи», по нажатому элементу. Но я не вижу нигде в вашем коде, где вы прикрепляете какие-либо атрибуты данных к любому из ваших элементов. Вы добавили атрибут «username», но он не совпадает с атрибутом data, и у него также есть другое имя.

Во-вторых, вы не можете использовать функцию стрелки в качестве «клика» функция обратного вызова, потому что this будет иметь неправильную область видимости. (Вы можете прочитать больше об этом в другом месте онлайн ).

Вот рабочая демонстрация:

$(document).ready(function() {

  //some dummy data
  var streams = {
    "home": [{
      "user": "a",
      "message": "hello",
      "created_at": "Friday"
    }]
  };
  
  var index = streams.home.length - 1;
  while (index >= 0) {
    var tweet = streams.home[index];
    var $tweet = $('<div class="tweet"></div>');
    var $user = $('<div class="users"></div>');
    var $message = $('<div class="message"></div>');
    var $time = $('<div class="time"></div>');
    // $tweet.text('@' + tweet.user + ': ' + tweet.message + ' ' + tweet.created_at);
    $tweet.appendTo($('.tweets'));
    $time.text(tweet.created_at + '\n').appendTo($tweet);
    
    //create a data-attribute instead of an attribute
    $user.text('@' + tweet.user + ': ').data('username', tweet.user).appendTo($tweet);
    $message.text(tweet.message + ' ').appendTo($tweet);
    index -= 1;
  }

  //use a regular function insted of an arrow function
  $('.tweets').on('click', '.users', function() {
    var user = $(this).data('username'); //search for the correct data-attribute name
    console.log(user);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tweets"></div>