nested for loop, inner variable is not defined

[handred800]

im trying to use nested loop, but I can't access the inner variable

check out example below:

context: {
  selection: [
    {
      "title": "hello",
      "count": 2
    },
    {
      "title": "world",
      "count": 2
    },
    ...
  ]
}

@@for(var i = 0; i < selection.length; i++){
    <ul>
    <li>${i} +`+selection[i].title+`</li>
    @@for(var j = 0; j < `+(JSON.stringify(selection[i].count))+`; j++){
        <li>${i} - ${j}</li>
    }
    </ul>
}

and i got error: j is not defined

if not using j, work perfectly

@@for(var i = 0; i < selection.length; i++){
    <div>${i} +`+selection[i].title+`</div>

    @@for(var j = 0; j < `+(JSON.stringify(selection[i].count))+`; j++){
        <div>${i}</div>
    }
}

output

<ul>
    <li>0 hello</li>
    <li>0</li>
    <li>0</li>
</ul>
<ul>
    <li>1 world</li>
    <li>1</li>
    <li>1</li>
</ul>
...

how do I access the variable(j) in second @@for?

[handred800]

I found an alternative solution to nested loop:

goal: use this selection object to create html below

context: {
  selection: [
    {
      "title": "hello",
      "count": 3
    },
    {
      "title": "world",
      "count": 2
    },
    ...
  ]
}

<ul>
    <li>0 hello</li>
    <li>0-1</li>
    <li>0-2</li>
    <li>0-3</li>
</ul>
<ul>
    <li>1 world</li>
    <li>1-1</li>
    <li>1-2</li>
</ul>
...

solution:

Nested @@for doesn't work(so far), so using both @@for and @@loop.
To create html by @@loop function, you need to create an array of object according selection object.
Rebuild the selection object in gulpfile.js
make this

context: {
  selection: [
    {
      "title": "hello",
      "count": 3
    },
    {
      "title": "world",
      "count": 2
    },
    ...
  ]
}

to this (use forEach or whatever you prefer)

context: {
  selection: [
    {
      "title": "hello",
      "count": 3,
      "list": [
        { "index": "0-0" },
        { "index": "0-1" },
        { "index": "0-2" },
        { "index": "0-3" }
      ]
    },
    {
      "title": "world",
      "count": 2,
      "list": [
        { "index": "1-0" },
        { "index": "1-1" },
        { "index": "1-3" },
      ]
    },
    ...
  ]
}

After that, now you need a html template for rendering
Here is template.html

<li>@@index</li>

Then you can use @@for and @@loop now!

@@for(var i = 0; i < selection.length; i++){
    <li>${i} +`+selection[i].title+`</li>
    @@loop('template.html', `+(JSON.stringify(selection[i].list))+`);
}