Получить выбранный предмет

Question

Я хочу динамически заполнить массив и получить все значения из выбранных элементов. Например, у меня есть массив из двух объектов:

var allAdds = new Object();

var first = new Object();
first.ID = 1;
first.Location = "London";
first.Title = "some lovely title";
first.Description = "nice and long description";
first.DueDate = "2020-01-25";

var second = new Object();
second.ID = 2;
second.Location = "Manchester";
second.Title = "some lovely title";
second.Description = "nice and long description";
second.DueDate = "2020-01-23";

allAdds = [first, second];
var myString = JSON.stringify(allAdds);
var data = jQuery.parseJSON(myString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="list-group" id="myAddList"></div>
    <button type="button" id="add" class="btn btn-primary btn-block"> add</button>
  </div>

Мне удалось динамически добавить их в мой html:

$.each(data, function(key, value) {
  $('#myAddList').append(
    '<div>' +
    '<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">' +
    '<div class="d-flex w-100 justify-content-between">' +
    '<h5 class="mb-1">' + value.Title + '</h5>' +
    '<small>' + value.DueDate + '</small>' +
    '</div>' +
    '<p class="mb-1">' + value.Description + '</p>' +
    '<small>' + value.Location + '</small>' +
    '</a></div>'
  );
});

Однако, чего я хотел бы добиться, так это извлечь выбранный объект. то есть, если я нажму на первый элемент, я хотел бы получить его как объект для дальнейших манипуляций.

Как получить выбранный элемент:

$(".list-group div").click(function(e) {
    $(".list-group .list-group-item").removeClass("active");
    $(e.target).addClass("active");
   

РЕДАКТИРОВАТЬ

Что я хотел бы иметь:

var selectedItem = new Object();
selectedItem.ID = ???;
selectedItem.Title = ???;
selectedItem.Location = ???;

и так далее. Есть ли способ добиться этого?

Answer 1

Посещение по ссылке скрипта. Я добавил образец для того же

$ (". List-group div"). Click (function (e) {

$(".list-group .list-group-item").removeClass("active");
$(e.target).addClass("active");
console.log($(this).attr('data-id'));
console.log($(this).attr('data-title'));
console.log($(this).attr('data-location'));

}) ;

https://jsfiddle.net/prashantchaurasia/c9251udL/1/

Answer 2

Я предполагаю, что переменная data определена глобально, если временно не сохранить ее в какой-либо переменной, то вы можете сделать "get-функцию"

  function getDataById(id){
      var __found = jQuery.grep(data, function( n, i ) {return id == n.id;});       
      return __found[0];
  }

в вашей "сгенерированной разметке", добавив Атрибут данных, содержащий идентификатор

 '<div data-id="'+value.ID+'" > ... </div>'

и в вашем обработчике кликов вы можете использовать функцию сейчас

$(".list-group div").click(function(e) {
   var selectedItem = getDataById($(this).attr('data-id'));
   console.log(selectedItem.Title);
   ...

Не знаю, правильно ли я понял ваш вопрос, хотя