I am using an api which has information in json format. As an example something like this:
[
{
"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"
]
},
I first display a table with each item in it with information like id, name, price However, I want to make it so that whenever a user clicks on any part of the item additional description is displayed in a div below. I am using handlebars so I am trying to write something like this:
tableList.addEventListener('click',displayInfo);
unction displayInfo(e) {
displayInformation.insertAdjacentHTML('beforeend',profileInfo())
}
However, I need to solve an issue that I don't understand how to approach: I need to take information from API regarding one specific item that is chosen from the user's click. For example, if the user clicks on price 100 it needs to return object 0.
You can set data attributes on your elements and use them to get the object.
For example, consider you're rendering a list of items, you can get the object through the click event using the id property:
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>this works because events will bubble