I'm building a search function in javascript.
I made an array in a separate file with objects.
I'm trying to display 1 thing from the object that's inside of the array.
I already defined the path to the image so the only thing I'm storing in the array is the name. But it is still showing me a broken picture
Does someone have an idea?
Thanks!
Code:
// the entire code: https://codepen.io/Yung_n-d/pen/mdwQGqX
var data = [
//The list
{
workshop: '3D Animatie',
age: '',
wsType: 'beeldkunst',
wsLink: 'workshopPages/beeldkunst/3danimatie.php',
level: '',
photo: 'Beeldkunst.png',
},
{
workshop: 'Cartoon Tekenen',
age: '',
wsType: 'beeldkunst',
wsLink: 'workshopPages/beeldkunst/cartoontekenen.php',
level: '',
photo: 'Beeldkunst.png',
}]
var output = '<div class="list-group">';
$.each(data, function(key, val) {
//If workshop matches search result, display
if( ((val.workshop.search(caseExp) !== -1) || (val.wsType.search(caseExp) !== -1) )
&& ( (val.age.search(ageValue) !== -1) && (val.wsType.search(typeValue) !== -1) && (val.level.search(levelValue) !== -1) ) ){
output += '<a href=' + val.wsLink + ' target="_blank" > <div class="list-group-item"><h4 class="list-group-item-heading">' + val.workshop + '</h4></a>';
output += '<p> Leeftijdsgroep: ' + val.age + '</p>' + '<p> Hoofdcategorie: ' + val.wsType + '</p>' + '<img src=\'media/fotos/gallery/\'' + val.photo + '></div>';
}
});
output += '</div>';
$('#searchUpdate').html(output);
As @CBroe said in the comment, it was a typo when you build the image url. But you also have some tag mismatches in the code.
In a case like this it's much better to use string interpolation to build your HTML. You can do it for the whole item like this:
output += `<div class="list-group-item">
<a href="${val.wsLink} target="_blank">
<h4 class="list-group-item-heading">${val.workshop}</h4>
</a>
<p> Leeftijdsgroep: ${val.age}</p>
<p> Hoofdcategorie: ${val.wsType}</p>
<img src="media/fotos/gallery/${val.photo}">
</div>`;
This makes the code much more readable and would help prevent typos like it had.