Как передать скрытые данные в элемент списка HTML

Question

(Go легко для меня, я только изучаю HTML / JavaScript)

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

Например, учитывая приведенные ниже данные JSON, если я нажму «Салли», я хочу получить доступ к возрасту и полу этой Салли (может быть несколько Салли).

[
  {
    "name": "Charlie",
    "age": "9",
    "gender":"M"
  },
  {
    "name": "Sally",
    "age": "43",
    "gender": "F"
  },
  {
    "name": "Will",
    "age": "20",
    "gender": "M"
  },
  {
    "name": "Sally",
    "age": "18",
    "gender": "F"
  }
]

Есть ли способ добавить дополнительную информацию в элемент списка без ее отображения? Что-то вроде

<li class="list-item" age="18" gender="F">Sally</li>

Answer 1

Вы можете использовать data- атрибутов для добавления дополнительной информации. Что-то вроде:

<li class="list-item" data-age="18" data-gender="F">Sally</li>

Для подробного объяснения и знания, как это использовать в javascript, css et c. Вы можете видеть это MDN сделать c.

Answer 2

При нажатии этого элемента вы должны получить данные этого конкретного узла, а затем сопоставить их с вашим набором данных, используя фильтр массива. Вы можете увидеть больше о фильтре массива здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', event => {
    // handle click
    console.log(item)
    // data would be the array of objects, you provided
    let result = data.filter(person => person.name == item.innerText);
    // this would return two elements from your array with "Sally"
    console.log(result);
  })
})