Как по клику на элемент массива, который лежит в объекте, получать значение которое лежит в том же объекте?

Question

Суть в чём, есть у меня такой массив(динамический) с объектами и мне по клику на username(всех юзеров я вывожу списком на странице) нужно получать ссылку из callLink и переходить по ней. Я написал eventListener, но работает нормально только для первых двух юзеров, а если больше двух, то берёт только последнего юзера. Буду безумно благодарен за помощь, заранее спасибо!

Вот массив из объектов:

(2) […]

0: {…}

 callLink: "https://cop.com:4001/call/test/1595255422465-5390645"

 counter: 1

 id: "1595255422465-5390645"

 username: "User (352488)"

1: {…}

 callLink: "https://cop.com:4001/call/test/1595255510042-8293766"

 counter: 3

 id: "1595255510042-8293766"

 username: "User (411293)"

length: 2

Вот мой eventListener:

let items = document.querySelectorAll('.user-call') || [];

items = Array.from(items)
console.log(items.map(el => {
  console.log(el.innerText)
}), '<------item')
items = [...new Map(items.map(item => [item.innerText, item])).values()]
console.log(items)

items.forEach(item => {
  item.addEventListener('click', (e) => {
    let target = e.target.textContent

    window.open(callLink, target, 'scrollbars=no, ' +
      'resizable=no, status=no, location=no, toolbar=no, menubar=no, ' +
      'width=320, height=240, left=100, top=screen.height-240')
  })
})

Answer 1

Все зависит от того, где у вас хранится callLink после создания html элементов на странице. В целом, можете отталкиваться от нескольких возможных вариантов.

callLink никак не сохраняется, а так и хранится в исходном массиве. После клика по объекту выполняется функция, которая находит в исходном массиве юзера по ID/username и выдергивает его callLink.
При создании html элементов, вы сохраняете callLink в атрибутах элемента и уже с ним работаете.
Как мне кажется, самый корректный вариант, еще в момент создания элементов, нужно создавать обработчики, в которые сразу прокидывать callLink (см. пример).

users = [{
    id: 1,
    username: "user1",
    callLink: "user1 callLink"
  },
  {
    id: 2,
    username: "user2",
    callLink: "user2 callLink"
  },
  {
    id: 3,
    username: "user3",
    callLink: "user3 callLink"
  },
  {
    id: 4,
    username: "user4",
    callLink: "user4 callLink"
  },
  {
    id: 5,
    username: "user5",
    callLink: "user5 callLink"
  }
]

let root = document.getElementById("root");

users.map(item => {
  let user = document.createElement("div")
  user.textContent = item.username;
  user.addEventListener("click", () => {
    alert(item.callLink);
  })
  root.appendChild(user);
})

<div id="root"></div>

БЛОГ НА HUSL

Как по клику на элемент массива, который лежит в объекте, получать значение которое лежит в том же объекте?

Ответы (1 шт):