如何导入一个单一的东西从数组与对象在Javascript?

Question

我正在javascript中构建一个搜索函数。
我用对象在一个单独的文件中创建了一个数组。
我试图从数组内的对象中显示1个东西。
我已经定义了图像的路径，所以我在数组中存储的唯一东西是名称。但它仍然显示我一个破碎的图片
有人有一个主意吗?
谢谢!
代码:

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

Answer 1

正如@CBroe在评论中所说，当你构建图像url时，这是一个错别字。但是代码中也有一些标签不匹配。

在这种情况下，使用字符串插值来构建HTML要好得多。您可以对整个项目执行如下操作:

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

这使代码更易读，并有助于防止类似的打字错误。