Итерация через несколько объектов с одним и тем же свойством в пределах одного aray

Question

Я пытаюсь выполнить итерацию по всем объектам в этом массиве и показать все подписи. В конце концов я хочу показать все, но сейчас я соглашусь только на эту вещь. Как отобразить все титры на экране?

var thumbnails = [ 
    { 
     caption: 'An Avocado', 
     image: 'images/avocado.jpg', 
     url: 'https://en.wikipedia.org/wiki/Avocado' 
    }, 
    { 
     caption: 'A Cat', 
     image: 'images/cat.jpg', 
     url: 'http://mashable.com/category/cats/' 
    }, 
    { 
     caption: 'A Dog', 
     image: 'images/dog.jpg', 
     url: 'https://www.petfinder.com/dog-breeds/' 
    }, 
    { 
     caption: 'A Llama', 
     image: 'images/llama.jpg', 
     url: 'http://animals.nationalgeographic.com/animals/mammals/llama/' 
    }, 
    { 
     caption: 'Pandas are the best', 
     image: 'images/panda.jpg', 
     url: 'http://pandas.pydata.org/' 
    }, 
    { 
     caption: 'This is random', 
     image: 'images/thumb.jpg', 
     url: 'http://www.merriam-webster.com/dictionary/thumb' 
    } 
]; 

Это то, что у меня есть, но оно отображает только последний заголовок.

$.each(thumbnails, function(index, value) { 
    var myCaption = value.caption; 
    $('.thumbnails').html(myCaption); 
    console.log(myCaption); 
}); 

Answer 1

Вам нужно позвонить Append() вместо HTML(). Теперь, как это работает, ваши прежние значения текут, и отображается только последнее.

https://jsbin.com/makecekuqa/edit?html,js,console,output

Answer 2

Вам необходимо обновить свой код к следующему

var myCaption = ""; 
$.each(thumbnails, function(index, value) { 
    myCaption += value.caption + " "; 

}); 
$('.thumbnails').html(myCaption); 
console.log(myCaption);