Problème d'impression d'un tableau d'images en javascript

Question

Je fais une simple galerie en utilisant un tableau d'images:

var gallery_pictures = [ 
    { name:'01.jpg', alt:'01'}, 
    { name:'02.jpg', alt:'01'}, 
    { name:'03.jpg', alt:'01'}, 
    { name:'04.jpg', alt:'01'}, 
    { name:'05.jpg', alt:'01'} 
]; 

dans ce conteneur:

<div style="width:1000px; margin: 0 auto;" id="gallery"> 

</div> 

Et en utilisant une fonction qui stocke le texte dans une variable en utilisant une carte:

var gallery = gallery_pictures.map(function gallery(foto, index, array) { 
    pictures = '<div style="width:190px;margin-right: 10px; float:left;"><img width="200" src="'+foto.name+'" alt="'+foto.alt+'" "></div>' 
    return pictures; 
}); 

Puis-je imprimer dans mon div en utilisant innerHTML:

imageGallery.innerHTML=gallery; 

Le problème que j'ai, c'est que d'une manière ou d'une autre, il y a une virgule "," imprimée entre chaque image. Voici le résultat de code en chrome:

Et voici à quoi il ressemble dans l'écran:

Answer 1

Vous devez concaténer un tableau de manière à ce qu'il n'y ait aucune virgule.

var gallery = ""; 
gallery_pictures.forEach(function(foto){ 
    var pictures = '<div style="width:190px;margin-right: 10px; float:left;"><img width="200" src="'+foto.name+'" alt="'+foto.alt+'" "></div>'; 
    gallery += pictures; 
}); 
imageGallery.innerHTML = gallery; 

Answer 2

Ce que vous voulez est chacun ou une normale boucle.

Vous avez imprimé un tableau au format html. C'est la raison pour laquelle ils apparaissent comme élément de tableau.

méthode

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

La carte() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau d'appel.

Vous récupérez un tableau contenant les éléments qu'il contient. C'est la raison pour laquelle vous voyez des virgules.