Quiver Quiver - 5 months ago 58
JSON Question

Kendo ListView - Filter fields from nested JSON

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

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;
  }
}