So my problem is the each iteration in pug print only the end of the object
Here is my code
-
let boxes = {
"Test Title": {img: "img/articles/image-01.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-02.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-03.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-04.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-05.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-06.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-07.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"},
"Test Title": {img: "img/articles/image-08.jpg", p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"}
}
.articles#articles
.main-title Articles
.container
each value, key in boxes
.box
.image
img(src=value.img)
.text
h3 #{key}
p #{value.p}
.more
a Read more
i.fas.fa-long-arrow-alt-right
The Output
<div class="articles" id="articles">
<div class="main-title">Articles</div>
<div class="container">
<div class="box">
<div class="image"><img src="img/articles/image-08.jpg"></div>
<div class="text">
<h3>Test Title</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit</p>
</div>
<div class="more"><a>Read more</a><i class="fas fa-long-arrow-alt-right"></i></div>
</div>
</div>
I Expect iteration of 8 boxes not only one box
Thanks in advance
I have made a change in the object and in the h3 of each. This way the iteration works.
-
let boxes = [
{
name: "Test Title A",
img: "img/articles/image-01.jpg",
p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit"
},
{
name: "Test Title B",
img: "img/articles/image-01.jpg",
p: "Lorem ipsum dolor sit amet consectetur, adipisicing elit."
},
{
name: "Test Title C",
img: "img/articles/image-01.jpg",
p: "Lorem ipsum dolor sit, adipisicing elit. Reprehenderit"
},
]
.articles#articles
.main-title Articles
hr
.container
each value, key in boxes
.box
.image
img(src=value.img)
.text
h3 #{value.name}
p #{value.p}
.more
a Read more
i.fas.fa-long-arrow-alt-right