Menu for jade, how to mark up?

- var categories = ["Mobile phones","Tablets","Navigation"]
- var categoricons = ['img/categories/icon1.png','img/categories/icon2.png','img/categories/icon3.png']

ul.categories
 each item in categories


li.categories__item
a(href="").categories__link
span.categories__icon
 each item in categoricons 
 img(src= "#{item}")
 span.categories__text= item
 .categories__count 85


Compiles:

<ul class="categories">
 <li class="categories__item"><a href class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"><img src="img/categories/icon2.png"><img src="img/categories/icon3.png"></span><span class="categories__text">Mobile phones</span></a></li>
 <div class="categories__count">85</div>
 <li class="categories__item"><a href class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"><img src="img/categories/icon2.png"><img src="img/categories/icon3.png"></span><span class="categories__text">Tablets</span></a></li>
 <div class="categories__count">85</div>
 <li class="categories__item"><a href class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"><img src="img/categories/icon2.png"><img src="img/categories/icon3.png"></span><span class="categories__text">Navigation</span></a></li>
 <div class="categories__count">85</div>
</ul>


But you need to :
<ul class="categories">
 <li class="categories__item"><a href class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"></span><span class="categories__text">Mobile phones</span></a></li>
 <div class="categories__count">85</div>
 <li class="categories__item"><a href class="categories__link"><span class="categories__icon"><img src="img/categories/icon2.png"></span><span class="categories__text">Tablets</span></a></li>
 <div class="categories__count">85</div>
 <li class="categories__item"><a href class="categories__link"><span class="categories__icon"><img src="img/categories/icon3.png"></span><span class="categories__text">Navigation</span></a></li>
 <div class="categories__count">85</div>
</ul>


Help who knows, please=)
July 8th 19 at 15:24
1 answer
July 8th 19 at 15:26
Solution
There is in documentation:
each item, index in categories
 // ...
 img(src= "#{categoricons[index]}")

Nested loop is not needed.
have img src = undefined ( - Yoshiko24 commented on July 8th 19 at 15:29
: well you have a typo somewhere: codepen.io/hogart/pen/YWyMwW - genevieve_Upton commented on July 8th 19 at 15:32
: thanks! - Yoshiko24 commented on July 8th 19 at 15:35

Find more questions by tags Pug