I’m filling bootstrap cards with an external json file via XML HttpRequest. This works, all information is shown in the cards.
Now I would like to press “More info” to open a bootstrap modal with more information about the item.
The problem is when I press “More info” the data of the first item1 is always taken.
I know that the solution is that I have to pass the id of the elements to the modal, so that the correct data of the elements can be retrieved.
But I don’t understand how I can pass the id of an item to the modal?
JSON File
[{
"id": 1,
"name": "item1",
"price": "€5",
"size": "XS",
"color": "Green"
}, {
"id": 2,
"name": "item2",
"price": "€10",
"size": "S",
"color": "Yellow"
}, {
"id": 3,
"name": "item3",
"price": "€15",
"size": "M",
"color": "Blue"
}, {
"id": 4,
"name": "item4",
"price": "€20",
"size": "L",
"color": "Red"
}, {
"id": 5,
"name": "item5",
"price": "€25",
"size": "XL",
"color": "Gray"
}, {
"id": 6,
"name": "item6",
"price": "€30",
"size": "XXL",
"color": "Black"
}]
JS script of my program
<script>
const divRes = document.querySelector('#divResult');
myRequest = () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'files/elements.json', true);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status != 200) {
divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
} else {
const arrResponse = JSON.parse(xhr.responseText);
divRes.innerHTML = createHTMLCard(arrResponse);
}
}
};
xhr.onerror = function() {
divRes.innerHTML = "Request failed";
};
}
createHTMLCard = (arrObj) => {
let res = '';
for (let i = 0; i < arrObj.length; i++) {
res +=
`<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card m-2">
<div class="card-body">
<h5 class="card-title">${arrObj[i].name}</h5>
<p><strong>Prijs:</strong> ${arrObj[i].price}</p>
<button id="moreInfo" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">More info</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${arrObj[i].name}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>Price:</strong> ${arrObj[i].price}</p>
<p><strong>Size:</strong> ${arrObj[i].size}</p>
<p><strong>Color:</strong> ${arrObj[i].color}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`;
}
return res;
}
window.addEventListener('load', myRequest);
</script>
