Получить c пользовательских данных из класса, используя jQuery

Question

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

  //current feed
  var index = streams.home.length - 1;
  while (index >= 0) {
    var tweet = streams.home[index];
    //need to separate tweet message so only user class can be used for click event
    var $tweet = $('<div class=tweet></div>');
    var $user = $('<p id=users></p>');
    var $message = $('<p id=message></p>');
    var $time = $('<p id=time></p>');

    $time.text(tweet.created_at).appendTo($tweet);
    $user.text('@' + tweet.user + ': ').appendTo($tweet);
    $message.text(tweet.message).appendTo($tweet);
    $tweet.appendTo($('#tweets'));

    index -= 1;
  }

  //click event for new tweets
  $('button').click(function() {
    //pull a random tweet from streams.home which is an array of all tweets
    //can reuse code from current feed
    var tweet = streams.home[Math.floor(Math.random() * streams.home.length)];
    var $tweet = $('<div class=tweet></div>');
    var $user = $('<p id=users></p>');
    var $message = $('<p id=message></p>');
    var $time = $('<p id=time></p>');

    $time.text(tweet.created_at).appendTo($tweet);
    $user.text('@' + tweet.user + ': ').appendTo($tweet);
    $message.text(tweet.message).appendTo($tweet);
    $tweet.appendTo($('#tweets'));
  })

  //be able to view user profile
  //click event on user data only
  $('#tweets').on('click', '#users', function() {
    $('.container').hide();
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1> Twiddler </h1>
  <h3> Social Feed </h3>
</header>
<div class='container'>
  <section>
    <button id='home'> Home </button>
    <section class='main'>
      <p id='tweets'></p>
      <button id='new'>Push</button>
    </section>
  </section>
</div>
<div class='userfeed'>
</div>

Я делаю Twitter похожим на сайт как проект. Я работаю над функцией просмотра истории c пользователей. По сути, щелкнув по имени пользователя, можно отобразить его историю и скрыть любого другого пользователя. Я не уверен, как go об этом и получить данные для определенных c пользователей. Какие jQuery функции я должен использовать для выполнения sh этого?

Answer 1

• Для фильтрации массива используйте Array.prototype.filter ()
• Создайте шаблонную функцию для одного твита, которая возвращает желаемую HTML разметку
• Не использовать дублированные идентификаторы, вместо них используйте классы
• При нажатии получите значение data-user и отфильтруйте массив объектов по user свойству

const tweets = [
  {created_at: "2020-03-14T08:15:30Z", user:"aaa", message:"Lorem aaa ipsum"},
  {created_at: "2020-03-15T08:16:21Z", user:"bbb", message:"Lorem bbb ipsum"},
  {created_at: "2020-03-16T08:17:45Z", user:"aaa", message:"Lorem aaa ipsum"},
  {created_at: "2020-03-16T08:19:10Z", user:"ccc", message:"Lorem ccc ipsum"},
];

const template_tweet = tweet => $("<div>", {
  class: "tweet",
  html: `
    <span class="tweet-time">${new Date(tweet.created_at).toLocaleString()}</span>
    <a class="tweet-user" data-user="${tweet.user}">@${tweet.user}</a>
    <div class="tweet-message">${tweet.message}</div>
  `,
});

const showTweets = (tweets, user) => {
  const tweetsFiltered = user ? tweets.filter(tweet => tweet.user === user) : tweets;
  $("#tweets").html(tweetsFiltered.map(template_tweet));
}

showTweets(tweets); // Show all unfiltered

$("#tweets").on('click', '[data-user]', function() {
  showTweets(tweets, this.dataset.user); // Show by user name
});

.tweet {padding: 10px;}
.tweet-user {color:#08e; cursor:pointer;}

<div id="tweets"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>