How to make advanced filter with jQuery

  javascript, jquery, json, laravel

The Question;
I want to filter by properties.

I have json data coming from the api and I want to filter that data.(If there is a way to do with laravel I would like to try that too)

Json Data;

[
  {
    "id": 1,
    "title": "Deneme Batarya",
    "description": "<p>Deneme Batarya</p>",
    "slug": "deneme-batarya",
    "brand_id": 4,
    "deleted_at": null,
    "created_at": "2021-02-22 19:43:02",
    "updated_at": "2021-02-22 19:43:02",
    "categories": [
      {
        "id": 3,
        "parent_id": null,
        "title": "Giyilebilir Teknoloji",
        "description": null,
        "slug": "giyilebilir-teknoloji",
        "media": "public/media/slider/ms-10.jpg",
        "level": 0,
        "deleted_at": null,
        "created_at": null,
        "updated_at": null,
        "pivot": {
          "product_id": 1,
          "category_id": 3
        }
      },
      {
        "id": 26,
        "parent_id": 3,
        "title": "Akıllı Bileklik",
        "description": null,
        "slug": "akilli-bileklik",
        "media": "public/media/slider/ms-10.jpg",
        "level": 2,
        "deleted_at": null,
        "created_at": null,
        "updated_at": null,
        "pivot": {
          "product_id": 1,
          "category_id": 26
        }
      }
    ],
    "images": [
      {
        "id": 3,
        "product_id": 1,
        "product_detail_id": 1,
        "sku": "model-45b",
        "image": "public/media/product/1-model-45b864.png",
        "level": 1,
        "deleted_at": null,
        "created_at": "2021-02-24 19:49:16",
        "updated_at": "2021-02-24 19:49:16"
      },
      {
        "id": 4,
        "product_id": 1,
        "product_detail_id": null,
        "sku": null,
        "image": "public/media/product/1--501.jpeg",
        "level": 1,
        "deleted_at": null,
        "created_at": "2021-02-24 19:53:27",
        "updated_at": "2021-02-24 19:53:27"
      }
    ],
    "details": [
      {
        "id": 1,
        "product_id": 1,
        "qty": 5,
        "status": "Available",
        "price": "56.00",
        "discount": 5,
        "sku": "model-45b",
        "start": "2021-02-22 00:00:00",
        "end": "2021-02-23 00:00:00",
        "deleted_at": null,
        "created_at": "2021-02-22 19:43:27",
        "updated_at": "2021-02-22 19:43:27"
      },
      {
        "id": 2,
        "product_id": 1,
        "qty": 6,
        "status": "Available",
        "price": "90.00",
        "discount": 4,
        "sku": "model-45a",
        "start": "2021-02-25 00:00:00",
        "end": "2021-02-26 00:00:00",
        "deleted_at": null,
        "created_at": "2021-02-24 19:26:48",
        "updated_at": "2021-02-24 19:26:48"
      }
    ],
    "properties": [
      {
        "id": 1,
        "product_id": 1,
        "product_detail_id": 1,
        "property_id": 7,
        "parent_id": 1,
        "created_at": "2021-02-22 19:43:27",
        "updated_at": "2021-02-22 19:43:27",
        "property": {
          "id": 7,
          "parent_id": 1,
          "title": "Green",
          "slug": "green",
          "value": "#008000",
          "created_at": null,
          "updated_at": null
        },
        "parent": {
          "id": 1,
          "parent_id": null,
          "title": "Color",
          "slug": "color",
          "value": null,
          "created_at": null,
          "updated_at": null
        }
      },
      {
        "id": 2,
        "product_id": 1,
        "product_detail_id": 1,
        "property_id": 20,
        "parent_id": 3,
        "created_at": "2021-02-22 19:43:27",
        "updated_at": "2021-02-22 19:43:27",
        "property": {
          "id": 20,
          "parent_id": 3,
          "title": "1 TB",
          "slug": "1-tb",
          "value": "1 TB",
          "created_at": null,
          "updated_at": null
        },
        "parent": {
          "id": 3,
          "parent_id": null,
          "title": "Store Capacity",
          "slug": "store-capacity",
          "value": null,
          "created_at": null,
          "updated_at": null
        }
      },
      {
        "id": 3,
        "product_id": 1,
        "product_detail_id": 2,
        "property_id": 7,
        "parent_id": 1,
        "created_at": "2021-02-24 19:26:48",
        "updated_at": "2021-02-24 19:26:48",
        "property": {
          "id": 7,
          "parent_id": 1,
          "title": "Green",
          "slug": "green",
          "value": "#008000",
          "created_at": null,
          "updated_at": null
        },
        "parent": {
          "id": 1,
          "parent_id": null,
          "title": "Color",
          "slug": "color",
          "value": null,
          "created_at": null,
          "updated_at": null
        }
      },
      {
        "id": 4,
        "product_id": 1,
        "product_detail_id": 2,
        "property_id": 12,
        "parent_id": 2,
        "created_at": "2021-02-24 19:26:48",
        "updated_at": "2021-02-24 19:26:48",
        "property": {
          "id": 12,
          "parent_id": 2,
          "title": "L",
          "slug": "l",
          "value": "Large",
          "created_at": null,
          "updated_at": null
        },
        "parent": {
          "id": 2,
          "parent_id": null,
          "title": "Size",
          "slug": "size",
          "value": null,
          "created_at": null,
          "updated_at": null
        }
      },
      {
        "id": 5,
        "product_id": 1,
        "product_detail_id": 2,
        "property_id": 17,
        "parent_id": 3,
        "created_at": "2021-02-24 19:26:48",
        "updated_at": "2021-02-24 19:26:48",
        "property": {
          "id": 17,
          "parent_id": 3,
          "title": "64 GB",
          "slug": "64-gb",
          "value": "64 GB",
          "created_at": null,
          "updated_at": null
        },
        "parent": {
          "id": 3,
          "parent_id": null,
          "title": "Store Capacity",
          "slug": "store-capacity",
          "value": null,
          "created_at": null,
          "updated_at": null
        }
      }
    ]
  }
]

I don’t know the properties that user added because it is dynamic. So I’m reaching the properties like this.

function makeQueryString() {
    function keyValues(idPref) {
        var key = idPref,
            values = $('#' + idPref + ' input[id^="' + idPref + '"]').map(function() {
                if (this.value !== this.defaultValue || this.checked !== this.defaultChecked) {
                    return this.value;
                }
            }).get().join(',');

        return key && values.length ? key + '=' + values : '';
    }

    return $('form#property-filter span[id]').map(function(){
        let keyValue = keyValues(this.id);
        if (keyValue != ''){
            return keyValue;
        }
    }).get().join('&');
}

It Returns;
id of properties with name

color=6,7&store-capacity=15,16,17&ram=21,22,23

Source: Laravel

Leave a Reply