eleventy icon indicating copy to clipboard operation
eleventy copied to clipboard

Filter data with tags

Open ctuxboy opened this issue 5 years ago • 0 comments

Hello,

Develop a simple website with several contacts. The data for generate the page is a single data JSON-file (contacts.json)

Example snippet:

[
  {
    "id": "1",
    "service": "Brandweer/Ambulance",
    "contact": [
      {
        "icon": "phone",
        "action": "tel:",
        "meta":"0495678338",
        "name": "Bellen"
      }
    ],
    "website": "https://www.belgium.be/nl/justitie/veiligheid/voorzorgen_nemen/veiligheidsdiensten/brandweer",
    "active": "yes",
    "icon": "ambulance",
    "description": "Bel 112 indien U dringend hulp nodig hebt van Brandweer, Ambulance of Politie.",
    "modaltext": "",
    "tags": [ "nood" ],
    "properties": [
      {
        "icon": "globe",
        "tooltip":"Europa"
      },
      {
        "icon": "clock",
        "tooltip":"24h/7d"
      },
      {
        "icon": "euro-sign",
        "tooltip": "gratis"
      }
    ]
  },
  {
  "id": "2",
  ..
  },
...
]

The index-page is a for-loop the loop trough the single JSON-file. Using Nunjucks templates and Bootstrap framework for building the page.

Is it possible filter the contacts by click on the tags (see screenshot)? So only the contacts are visible from a tag? Schermafbeelding_2020_07_01_om_11_49_40

PS: finding in the docs , how can adding tags in the frontmatter, for seperate files, but can't figure out how filter 'on-the-fly' for single JSON file.

Someone can push me in the right direction?

ctuxboy avatar Jul 01 '20 09:07 ctuxboy