Here is my HTML handlebar code, fetching data from JSON data, I can fetch all data from json, however, I would like to filter by sector and show them. Can we use data-filter attribute? How we could give an id to each object in json file?

    <li><a href="#" data-filter="*" class="active">All</a></li>
    <li><a href="#" data-filter=".coffe-rest">Coffee-Restaurant</a></li>
    <li><a href="#" data-filter=".bars">Bars</a></li>
    <li><a href="#" data-filter=".takeaway">Takeaway</a></li>
    <li><a href="#" data-filter=".residantial">Residantial</a></li>
    <li><a href="#" data-filter=".commercial">Commercial</a></li>

{{#each all_projects}}

{{title}}

{{/each}}

Also here is my jquery ;

$(document).ready(function() {

var projectTemplate = $("#project-template").html()

var compiledProjectTemplate = Handlebars.compile(projectTemplate);
var $projectList = $(".projects-feed")

var projectId = getParameterByName("id"); console.log("project id: ", projectId)

$.ajax("data.json").done((project) => {
    if($("body").hasClass("project-details")) {
        $projectList.html(compiledProjectTemplate(project.projects[projectId]))
    } else {
        $projectList.html(compiledProjectTemplate(project))
    }

});

});

enter image description here Thank you for all your answers..