gulp-file-include icon indicating copy to clipboard operation
gulp-file-include copied to clipboard

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

Open lossen opened this issue 5 years ago • 0 comments

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 avatar Dec 30 '20 12:12 lossen