Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to loop array of objects if it is inside array of objects in the same JSON file? #182

Open
lossen opened this issue Dec 30, 2020 · 0 comments

Comments

@lossen
Copy link

lossen commented Dec 30, 2020

I have gallery.json file with data

[
  {
    "id": 1,
    "name": "The Starry Night ttest",
    "description": "An oil on canvas painting by Dutch Post-Impressionist painter Vincent van Gogh.",
    "image": "../images/gallery/old_walls.jpg",
    "resources": [
      { "name":"Resource name", "type": "Image" },
      { "name":"Resource name", "type": "Image" },
      { "name":"Resource name", "type": "Image" }
    ]
  },
  {
    "id": 1,
    "name": "The Starry Night ttest",
    "description": "An oil on canvas painting by Dutch Post-Impressionist painter Vincent van Gogh.",
    "image": "../images/gallery/old_walls.jpg",
    "resources": [
      { "name":"Resource name", "type": "Image" },
      { "name":"Resource name", "type": "Image" },
      { "name":"Resource name", "type": "Image" }
    ]
  }
]

In html I'm using @@loop('./includes/components/gallery/gallery-item.html', "./gallery.json")
In gallery-item.html I have

<div class="gallery__item">
    <div class="row gallery__item-inner">
        <a class="gallery__item-lg col-md-6 col-sm-6" href="../images/gallery/old_walls.jpg">
            <img class="gallery__item-image" src="../images/gallery/old_walls.jpg" />
        </a>
        <div class="gallery__item-content col-md-6 col-sm-6">
            <div class="gallery__item-title">@@name</div>
            <div class="gallery__item-description">@@description</div>
            <div class="resources-list">
                @@loop('./includes/components/gallery/resource-item.html', "./gallery.json")

                <div class="resource-item">
                    <div class="resource-item__image-wrap">
                        <img src="https://loremflickr.com/240/320" class="resource-item__image"/>
                    </div>
                    <div class="resource-item__content">
                        <div class="resource-item__name">Recource name</div>
                        <div class="resource-item__type">Recource type</div>
                    </div>
                </div>
                <div class="resource-item">
                    <div class="resource-item__image-wrap">
                        <img src="https://loremflickr.com/540/720" class="resource-item__image"/>
                    </div>
                    <div class="resource-item__content">
                        <div class="resource-item__name">Recource name</div>
                        <div class="resource-item__type">Recource type</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The question is how I can loop resources from gallery.json in gallery-item.html?

@lossen lossen changed the title How to loop array of objects in array of objects? How to loop array of objects if it is inside array of objects in the same JSON file? Dec 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant