Filter fields from nested JSON object

4 posts, 1 answers
  1. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 28 Jun Link to this post

    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.

  2. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 29 Jun Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 01 Jul Link to this post

    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.
     
  5. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 01 Jul in reply to Daniel Link to this post

    Thanks for that suggestion Daniel. I'll try it out as it seems like a much cleaner way of going about it.
Back to Top
Kendo UI is VS 2017 Ready