Kendo ListView - Filter fields from nested JSON

Question

I am using the following JSON data in my Kendo ListView:

[
  {
    "Id": 2,
    "Name": "My Name",
    "Address": "123 Sesame Street",
    "City": "My City",
    "State": "MO",
    "ProductTypes": [
      {
        "Id": 2,
        "Name": "Cage Free"
      },
      {
        "Id": 3,
        "Name": "Free-Trade"
      },
      {
        "Id": 4,
        "Name": "GAP"
      },
      {
        "Id": 6,
        "Name": "Grass Fed"
      }
    ]
  }
]

Now here is my goal/issue. I would like to filter the datasource when a checkbox is checked and the field I would like to filter by is the ProductTypes.Name field.

However, I'm not sure how to get this working correctly.

Here is my DataSource :

profileDataSource: new kendo.data.DataSource({
    transport: {
        read: {
            url: "/Profile/GetAllProfiles",
            dataType: "json"
        }
    },
    schema: {
        model: {
            fields: {
                Id: { type: "number", editable: false, nullable: true },
                Name: { type: "string" },
                ProductTypes_Name: { type: "string", from: "ProductTypes.Name" }
            }
        }
    }
})

And here is how I'm currently trying to filter but it's not working:

$("#profileCertificationsListView").on("click", "input[type=checkbox]", function() {
    viewModel.profileDataSource.filter({
        filters: [
            { field: "ProductTypes_Name", operator: "eq", value: $(this).attr("name") }
        ]
    }
}); 

If I check the checkbox that has the name of "Cage Free" for example, all of the items in the listview are hidden.

----- UPDATE -----

I have arrived at a solution to my problem thanks to the help of @Suresh-c

This is what I have working now:

$("#profileCertificationsListView").on("click", "input[type=checkbox]", function() {
    var name = $(this).attr("name");
    var list = $("#profileDirectoryListView").data("kendoListView").dataSource.data();
    var filtered = [];
    for (var i = 0; i < list.length; i++) {
        for (var j = 0; j < list[i].ProductTypes.length; j++) {
            if (list[i].ProductTypes[j].Name === name) {
                filtered.push(list[i]);
            }
        }
    }

    $("#profileDirectoryListView").data("kendoListView").dataSource.data(filtered);
});

Answer 1

I had similar requirement and I used parse function to apply filter on nested JSON data. Check this thread for the details.

The schema looks something like this.

 schema: { parse: function (d) { var filtered = []; for (var i = 0; i < d.length; i++) { for(var j=0; j < d[i].ProductTypes.results.length; j++) { if (d[i].ProductTypes.results[j].Name == "Cage Free") filtered.push(d[i]); } } return filtered; } }