How to import a single thing from an array with objects in Javascript?-CodePudding

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);

CodePudding user response：

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.