Loop With Passed Array

[chezwicker]

Hi there!

I have three html files:

• index.html, which includes
• section.html, which includes
• row.html

Now in index.html I'm passing json to section.html

@@include("./section.html", {
	"title": "My Title",
	"sections": [
		{
			"image": "/images/a.png",
			"text": {
				"content": "line 1",
				"classes": "col-12 col-sm-6"
			}
		},
		{
			"image": "/images/b.png",
			"text": {
				"content": "line 2",
				"classes": "col-12 col-sm-8"
			}
		}
	]
})

In section.html, I'm then trying to loop over the "sections" array:

@@loop("row.html", @@sections)

Unfortunately, that doesn't work, @@sections is not found. I've also tried to put the sections into a json file and to pass the file name to use, but that also didn't work ;-(

Am I doing this wrong? I assumed this would work since @@if allows to pass in another variable as well.

Any ideas or workarounds? Thanks!

[chezwicker]

Created PR #164 to suggest an initial way to fix this. No tests yet (happy to implement if you think this is a possible solution) and most likely does not meet any other requirements you have for this project. Of course happy to update with your feedback.

[adoumas]

Give a try to this usage

This is my main include

@@include('sections/home.html',{
        "title": "Big title",
        "title_class": "section__title--red",
        "links": {
            "active": true,
            "title":"Sub title",
            "list": [
                {"title":"Link 1"},
                {"title":"Link 2"},
                {"title":"Link 3"},
            ]
        }
    })

This is my "sections/home.html"

@@if (links.active === true){
                        <h3>@@links.title</h3>
                        <ul class="list-unstyled">
                            @@for (var i = 0; i < links.list.length; i++) {
                                @@include('../partial/links-list.html', `+(JSON.stringify(links.list[i]))+`)
                            }
                        </ul>
                    }

And this my "partial/links-list.html"

<li><a href="#">@@title</a></li>

Dont ask me but it works :P

[tito12]

@adoumas thank you!

[Loic57]

Give a try to this usage

This is my main include

@@include('sections/home.html',{
        "title": "Big title",
        "title_class": "section__title--red",
        "links": {
            "active": true,
            "title":"Sub title",
            "list": [
                {"title":"Link 1"},
                {"title":"Link 2"},
                {"title":"Link 3"},
            ]
        }
    })

This is my "sections/home.html"

@@if (links.active === true){
                        <h3>@@links.title</h3>
                        <ul class="list-unstyled">
                            @@for (var i = 0; i < links.list.length; i++) {
                                @@include('../partial/links-list.html', `+(JSON.stringify(links.list[i]))+`)
                            }
                        </ul>
                    }

And this my "partial/links-list.html"

<li><a href="#">@@title</a></li>

Dont ask me but it works :P

I copied this code and I have "links is not defined"
I have to put context.links to make it work

[vitamineart]

@adoumas you are the HERO!

Do you think it's possible to increase the number of lists ?

`{

    "title" : "Super Title",
    "features" : {
        "monthly": [
            { "feature" : "Billed Annually" },
            { "feature" : "5 items per Month" }
        ],
        "yearly": [
            { "feature" : "Billed Annually" },
            { "feature" : "15 items per Month" }
        ]
    }

},`

and loop it like this
@@for (var i = 0; i < features.length; i++) { @@include('../partials/subscription-plan-features-li.html', +(JSON.stringify(features[i]))+ )}

I tried to do so but the error message says

Cannot read property 'length' of undefined: for (var i = 0; i < features.monthly.length; i++) { result+=@@include('../partials/subscription-plan-features-li.html', +(JSON.stringify(features.monthly[i]))+ ); }