nested if in for loop; Error: i is not defined

[mishingo]

Im trying to nest a conditional in the for loop like below and receive error: Error: i is not defined is there a way I can achieve the same result?

@@for (var i = 0; i < arr.length; i++) { @@if(i == 0){ Hello World } }

[hesselberg]

+1, this would be very useful

[pimkle]

any idea?

[pimkle]

how about nest file in file? like this: https://github.com/coderhaoxin/gulp-file-include/issues/62

[anulal-s]

Define one another variable with i, in following snippet li to be selected when i == 0

@@for(var i = 0, s = 'selected'; i < 5; i++, s = '') { 
    <li class="`+s+`">item `+i+`</li>
}

[pimkle]

After a day's attempting, I found out that in current version, there's no way to achieve this using only fileinclude. You just can't nest if/loop in if/loop. I've also tried nested if in if, nested loop in loop , none of them worked. Just write a component or use js to judge. And fileinclude doesn't support trans data in js neither. I think it is best for simple header footer include, which is cool, too.

[adamlindqvist]

@pimkle thanks for info. Was also struggling with this.

Would be a very useful functionality if this is added.

[huangwentai]

do you fixed yet , i find way like this ,and it work

@@for (var i = 0; i < breadcrumb.length; i++) {
					<li class="breadcrumb-item `+ breadcrumb[i].active +`">
						`+ ((breadcrumb.length!=i+1)?('<a href="#">' +breadcrumb[i].name+ '</a>'):breadcrumb[i].name) +`
					</li>
				}

<li class="breadcrumb-item "><a href="#">參數</a></li>
<li class="breadcrumb-item active">系統參數</li>

[codechameleon23]

this solution is not working for me:

my code:

@@for (var i = 0; i < context.card.length; i++) {
               <div class="p-sm lg:col-4 flex-col">
                  <div class="flex-col flex-stretch">
                     <section class="ratio-1x1 mb-sm">
                        <div class="flex-col flex-stretch `+context.card[i].ImageClasses+`" style="background-image:url('`+context.card[i].image+`')"></div>
                     </section>
                     <div class="w-full text-wrap">
                        `+context.card[i].title ? ( 
                           @@include('./_includes/_commons/h2.html', {
                           "title": "<span>context.card[i].title</span>",
                           "className": "context.card[i].titleClass"
                           })
                        ) : ''+`
                        
                     </div>
                  </div>
               </div>
            }

error message:

Invalid or unexpected token: for (var i = 0; i < context.card.length; i++)  { result+=`
               <div class="p-sm lg:col-4 flex-col">
                  <div class="flex-col flex-stretch">
                     <section class="ratio-1x1 mb-sm">
                        <div class="flex-col flex-stretch `+context.card[i].ImageClasses+`" style="background-image:url('`+context.card[i].image+`')"></div>
                     </section>
                     <div class="w-full text-wrap">
                        `+context.card[i].title ? (
                           @@include('./_includes/_commons/h2.html', {
                           "title": "<span>context.card[i].title</span>",
                           "className": "context.card[i].titleClass"
                           })
                        ) : ''+`

                     </div>
                  </div>
               </div>
            `; }
Details:
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false