CODEWITHSUNDEEP
javascriptpug
vssadineni
vssadineni

Reputation: 454

PUG iteration has become a challenge

//- Below is the pug structure and I am trying to iterate the same.

    ul(class="mFAC_")
        li
            span(class="iconWrapper_ twitter_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#twitterIcon")
            span(id="total-" + keyword_kid, class="mMC_")
        li
            span(class="iconWrapper_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#faceBookIcon")
            span(id="total-" + keyword_kid, class="mMC_")
        li
            span(class="iconWrapper_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#linkedInIcon")
            span(id="total-" + keyword_kid, class="mMC_")
        li
            span(class="iconWrapper_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#youTubeIcon")
            span(id="total-" + keyword_kid, class="mMC_")
        li
            span(class="iconWrapper_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#pintrestIcon")
            span(id="total-" + keyword_kid, class="mMC_")
        li
            span(class="iconWrapper_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#InstagramIcon")
            span(id="total-" + keyword_kid, class="mMC_")
        li
            span(class="iconWrapper_")
                svg(viewBox="0 0 24 24")
                    use(xlink:href="#tumBlrIcon")
            span(id="total-" + keyword_kid, class="mMC_")

//- I am trying to get the output like Below, but in vain.

    - var iSource = [
    -           '#twitterIcon',
    -           '#faceBookIcon',
    -           '#linkedInIcon',
    -           '#youTubeIcon',
    -           '#InstagramIcon',
    -           '#tumBlrIcon'
    -]
    -   var iconId = each in iSource;

    -   var svgUseTag   =   "<use xlink:href="+ iconId +">";
    -   var svgTag =  "<svg viewBox='0 0 24 24'>"+ svgUseTag +"<svg>";
    -   var IconWrapper = "<span class='iconWrapper_' >"+ svgTag +"<span>";
    -   var countNuM    = "<spanid='total-'" + keyword_kid +" class='mMC_'>";

    -   var formatter = [
    -           IconWrapper
    -               svgTag
    -                   svgUseTag
    -           countNuM
    -   ]

    ul(class="mFAC_")
        each value in formatter
            li = value

I am a Designer and not a developer, but trying to achieve this in pug please help me with this as I consider myself novice in javascript.

Upvotes: 1

Views: 64

Answers (1)

tom
tom

Reputation: 10559

It's more simple. This should do it:

- var keyword_kid = 1;
- var iSource = ['#twitterIcon', '#faceBookIcon', '#linkedInIcon', '#youTubeIcon', '#InstagramIcon', '#tumBlrIcon'];

ul(class="mFAC_")
  each item in iSource
    li
      span(class="iconWrapper_")
        svg(viewBox="0 0 24 24", xlink:href=item)
          use(xlink:href=item)
      span(id="total-" + keyword_kid, class="mMC_")

Upvotes: 3

Related Questions