Estoy usando una API que tiene información en formato json. Como ejemplo algo como esto:
[ { "id": "XWaQXcbk0", "name": "Potato", "description": "This is description 0", "image": "https://s1.eda.ru/StaticContent/Photos/140812180013/140820212258/p_O.jpg", "price": 100, "ingredients": [ "Potato", "Bacon", "Chesee", ] }, { "id": "pkXzyRp1P", "name": "Тomato", "description": "This is description 1.", "image": "https://www.go-cook.ru/wp-content/uploads/2014/11/magribskij-tomatnyj-sup.jpg", "price": 150, "ingredients": [ "Tomato", "Chicken", "Honey" ] },Primero muestro una tabla con cada elemento con información como identificación, nombre, precio. Sin embargo, quiero hacerlo de modo que cada vez que un usuario haga clic en cualquier parte del elemento, se muestre una descripción adicional en un div a continuación. Estoy usando manillares, así que estoy tratando de escribir algo como esto:
tableList.addEventListener('click',displayInfo); unction displayInfo(e) { displayInformation.insertAdjacentHTML('beforeend',profileInfo()) }Sin embargo, necesito resolver un problema que no entiendo cómo abordar: necesito tomar información de la API con respecto a un elemento específico que se elige del clic del usuario. Por ejemplo, si el usuario hace clic en el precio 100, debe devolver el objeto 0.
Puede establecer atributos de datos en sus elementos y usarlos para obtener el objeto.
Por ejemplo, considere que está representando una lista de elementos, puede obtener el objeto a través del evento de clic usando la propiedad id:
const list = [{ "id": "XWaQXcbk0", "name": "Potato", "description": "This is description 0", "image": "https://s1.eda.ru/StaticContent/Photos/140812180013/140820212258/p_O.jpg", "price": 100, "ingredients": [ "Potato", "Bacon", "Chesee", ] }, { "id": "pkXzyRp1P", "name": "Тomato", "description": "This is description 1.", "image": "https://www.go-cook.ru/wp-content/uploads/2014/11/magribskij-tomatnyj-sup.jpg", "price": 150, "ingredients": [ "Tomato", "Chicken", "Honey" ] }, ]; const render = (array) => { const ul = document.createElement('ul'); ul.classList.add('list') ul.addEventListener('click', ({ target }) => { const listItem = target.closest('.list-item'); const id = listItem.getAttribute('data-id'); const correspondingObject = array.find(item => item.id === id) console.log(correspondingObject); // this is the object you want }) const template = document.querySelector('.list-item-template'); array.forEach(({ id, description }) => { const listItem = template.content.firstElementChild.cloneNode(true); listItem.setAttribute('data-id', id); listItem.querySelector('.id').innerText = id listItem.querySelector('.description').innerText = description ul.append(listItem) }) document.body.append(ul) } render(list); .list { list-style-type: none; padding: 0; } .list-item { margin-bottom: 1rem; border: 1px solid black; } <template class="list-item-template"> <li class="list-item"> <span class="id"></span> <p class="description"></p> </li> </template>esto funciona porque los eventos burbujearán