This is a migrated thread and some comments may be shown as answers.

Filter fields from nested JSON object

5 Answers 608 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Austin
Top achievements
Rank 1
Austin asked on 28 Jun 2016, 06:29 PM

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

[
  {
    "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 "Cage Free" for example, all of the items in the listview are hidden.

5 Answers, 1 is accepted

Sort by
0
Austin
Top achievements
Rank 1
answered on 29 Jun 2016, 03:33 PM

I was able to figure out a solution:

$("#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.length; j++) {
            if (list[i].ProductTypes[j].Name === name) {
                filtered.push(list[i]);
            }
        }
    }
 
    $("#profileDirectoyrListView").data("kendoListView").dataSource.data(filtered);
});

0
Accepted
Daniel
Telerik team
answered on 01 Jul 2016, 07:01 AM
Hello Austin,

You can also use a custom function for the filter operator e.g.
profileDataSource.filter({
  field: "ProductTypes",
  operator: function (itemValue, value) {
      return itemValue && itemValue.find(function (item) {
          return item.Name === value;
      });
  },
  value: $(this).attr("name")
});
Filtering on array fields will not work by default.

Regards,
Daniel
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Austin
Top achievements
Rank 1
answered on 01 Jul 2016, 02:19 PM
Thanks for that suggestion Daniel. I'll try it out as it seems like a much cleaner way of going about it.
0
tushar
Top achievements
Rank 1
answered on 09 Dec 2020, 03:22 AM

hii 

[
    {
        "id": "2025550156",
        "name": "Moto",
        "optin": true,
        "activityStatus": {
            "lastLocationTime": "2019/12/26 14:56:58 GMT+05:30",
            "lastLocationAddress": "",
            "lastJobTime": "2019/12/26 14:28:10 GMT+05:30",
            "lastJobSite": "None",
            "lastJobStatus": "Start Day",
            "lastLocationType": "",
            "activeSchedule#": "",
            "autoTrack": "",
            "lastAppActivity": ""
        },
        "phoneDetails": {
            "model": "STV100-3",
            "softwareVers": "13.1.2",
            "batteryLvl": 1,
            "sdkVersion": "",
            "manufacturer": "Apple",
            "carrier": ""
        },
        "appStatus": {
            "appName": "No App",
            "appVersion": "2.5.2",
            "currentVersion": "(LATEST)",
            "deviceGUID": ""
        },
        "connectionStatus": {
            "wifi": "DISCONNECTED",
            "gpsAvailable": "No",
            "gpsStatus": "On",
            "cellNetwork": "ON"
        }
           }
]

 

this is the json data i am getting so i need help how to implement in kendo i need to know how i  ll write schema and column

please help.

 

0
Misho
Telerik team
answered on 10 Dec 2020, 10:57 AM

Hello,

Here is a sample of listview which uses JSON data for Datasource, which you could use as a reference for building your custom implementation:

https://dojo.telerik.com/EGAHaHUl/11 

You could refer also the the following online resources which might be helpful for setting up your application with Kendo datasource:

I hope you will find this information useful.

Please don't hesitate to contact us again if a specific issue pops up or in case you have other feedback or questions related to Kendo UI components.

Best Regards,
Misho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Data Source
Asked by
Austin
Top achievements
Rank 1
Answers by
Austin
Top achievements
Rank 1
Daniel
Telerik team
tushar
Top achievements
Rank 1
Misho
Telerik team
Share this question
or