# Being able to filter JSON content inside dashboard

**URL:** <https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394>\
**Category:** Help me!\
**Tags:** dashboard\
**Created:** [October 18, 2022, 4:08pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394 "2022-10-18T16:08:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [October 18, 2022, 4:08pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/1 "2022-10-18T16:08:06Z")

</div>

![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/c/c5147adc0be6a2cf20e88c15244940c757aa9521.jpeg)

Hi ForestAdmin team,

is there a way to be able to filter JSON payloads thru the Forest Admin GUI ?

In this example, i’d like to be able to filter by “payload - includes - “4. Communication””. But i can’t select the “payload” column in the filter, because i guess JSON i by default forbidden in your GUI

Thanks a lot for your help !

---

<div class="post-metadata">

**Author:** ![anon16419211](https://avatars.discourse-cdn.com/v4/letter/a/7cd45c/32.png) [@anon16419211](https://community.forestadmin.com/u/anon16419211)\
**Post date:** [October 19, 2022, 9:26am UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/2 "2022-10-19T09:26:33Z")

</div>

Hello @Aarbel,

It is not supported by default as you mentioned. However I can suggest you to add a smart segment on your collection using the query mode to code the logic you want to filter on. 🙂

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/b/b6f4087928ec6e36c43e1ff67671ab2a6e06f4b3.png)

---

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [October 27, 2022, 1:57pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/3 "2022-10-27T13:57:42Z")

</div>

Thanks @anon16419211 for the tip,  
This would be really interesting to provide (Json to string) to be able to search also on json content thru the list view.

---

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [April 25, 2024, 2:15pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/4 "2024-04-25T14:15:13Z")

</div>

@anon16419211

Did you have any updates since 2 years to provide this filter / search on json ?

Basically having something like "[JSON\_KEY] includes [SOME\_STRING] would be really nice, just treating the JSON field as a string.

---

<div class="post-metadata">

**Author:** ![anon7284711](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@anon7284711](https://community.forestadmin.com/u/anon7284711)\
**Post date:** [April 29, 2024, 12:26pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/5 "2024-04-29T12:26:26Z")

</div>

Hello @Aarbel,

Sadly you would have to migrate to the `@forestadmin/agent` to benefit from the [Flattener](https://docs.forestadmin.com/developer-guide-agents-nodejs/agent-customization/plugins/provided-plugins/flattener) which would answer your needs out of the box.

Supposing that you would stay on `forest-express-sequelize`, I could suggest that you create a [Smart Field](https://docs.forestadmin.com/documentation/reference-guide/smart-fields) defined as a string, you could populate the field by extracting the desired properties from the JSON payload to then be able to filter/sort.

Best regards,

---

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [December 6, 2024, 12:40pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/6 "2024-12-06T12:40:18Z")

</div>

Thanks @dogan i added a smart field, but this field is no provided in the filter. How to be able to filter by the content of the custom field ?

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/9/9684f8a2905c19108e0a0fdf6945f54990285f66.png)  
 ![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/7/7f360a1da4d19e4324ca00530fd4152e6bda4fb9.png)

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/forest/original/2X/b/bd78e786694a77687753c2a7f9f725445bcb4cb1.png)

---

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [December 6, 2024, 12:58pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/7 "2024-12-06T12:58:20Z")

</div>

First I tried the “search” method

```javascript

  fields: [
    {
      field: "payloadstring",
      get: (payload) => {
        return JSON.stringify(payload);
      },
      search: function (query, search) {
        // Create a condition to check if the search string exists within the payloadstring
        const searchCondition = {
          payloadstring: { [Op.like]: `%${search}%` }, // Wildcard search
        };

        // Ensure the query's `where` clause exists and add the condition
        if (!query.where) {
          query.where = {};
        }

        if (!query.where[Op.and]) {
          query.where[Op.and] = [];
        }

        query.where[Op.and].push(searchCondition);

        return query;
      },
      type: "String",
    },
  ],

```

But it doesn’t work in this case searching “d1533f47-afc9-4f98-aa74-f83db1bee9e8” in this stringified payload:

`{"createdAt":"2021-10-26T08:40:49.420Z","id":"da33b272-b51e-4490-b75c-c3722ba8edc9","payload":{"file":{"id":"d1533f47-afc9-4f98-aa74-f83db1bee9e8","name":"File1InFolder1Nested"},"oldAssignations":[]},"type":"PROJECT/DOCUMENT/FILE/FILE_ASSIGNATIONS_UPDATED","updatedAt":"2021-10-26T08:40:49.420Z","creatorIdKey":"86c8c162-3405-457c-9724-727aea142580","creator":{"auth0Id":"auth0|60b61eeba278b7006ab1efc3","createdAt":"2021-04-22T17:42:47.265Z","deletedAt":null,"email":"victor@hugo.com","firstName":"victor","id":"86c8c162-3405-457c-9724-727aea142580","isActive":true,"isConnected":false,"isLegacyUser":false,"isLocked":false,"language":"en","lastName":"hugo","phone":"+33102030405","streamUserId":"61824832e0dcb4152bc6a96f","timezone":"Europe/Paris","updatedAt":"2024-12-06T11:52:28.641Z","wopiUserInfo":null}}`

---

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [December 6, 2024, 1:00pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/8 "2024-12-06T13:00:14Z")

</div>

Can you give a working example for a “search” function that returns well a result from a stringified json ?

---

<div class="post-metadata">

**Author:** ![anon7284711](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@anon7284711](https://community.forestadmin.com/u/anon7284711)\
**Post date:** [December 6, 2024, 3:02pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/9 "2024-12-06T15:02:22Z")

</div>

Hello @Aarbel,

I would suggest sticking to the filter function available when defining a field, as it would result in the best performance. If not there is no need to define a Smart Field, you could just [override the search](https://docs.forestadmin.com/documentation/reference-guide/routes/override-a-route#override-a-route) on the whole collection.

You were not able to filter on your field because you were missing the `isFilterable: true` configuration on your field, as [specified in the documentation](https://docs.forestadmin.com/documentation/reference-guide/smart-fields#:~:text=Make%20sure%20you,Fields%20Settings) of the Smart Field

In the same mindset of keeping the performance impact low, it would be best to restrict the path on which you search the value in your json, as the condition tree exposed is [Sequelize](https://sequelize.org/docs/v6/other-topics/other-data-types/#json-sqlite-mysql-mariadb-oracle-and-postgresql-only)’s. Here is what it would look like:

```javascript
    {
      field: "payloadstring",
      type: "String",
      isFilterable: true,
      get: (payload) => {
        return JSON.stringify(payload);
      },
      filter({ condition, where }) {
        switch (condition.operator) {
          case "equal":
            return {
              "payload.file.id": condition.value,
            };
          case "contains":
            return {
              "payload.file.id": { [Op.like]: `%${condition.value}%` },
            };

          // ... And so on with the other operators not_equal, starts_with, etc.

          default:
            return null;
        }
      },
    },

```

I’ve filled it with the path present in your last message. If you wish to make it work with multiple possible path I would suggest chaining them with an Or operator.

```javascript
{
  [Op.or]: [
    { 'payload.file.id': search },
    { 'payload.another.path': search, },
  ]
};

```

After defining your Smart Field, you will have to enable the filtering on your field on the frontend as shown [here](https://docs.forestadmin.com/user-guide/collections/customize-your-fields#basic-settings).

---

<div class="post-metadata">

**Author:** ![Aarbel](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/aarbel/32/3517_2.png) [@Aarbel](https://community.forestadmin.com/u/Aarbel)\
**Post date:** [December 8, 2024, 1:10pm UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/10 "2024-12-08T13:10:20Z")

</div>

Thanks a lot @dogan, but it’d like to have results on the whole json string “payloadstring”, and not having to hardcode the searched values function of the payload object (payload.file.id for example).

Why ? Because my payloads have different structure, so i want the forest implementation to be generic whatever the payloads are.

I just want that:

- if i perform a search with the string “d1533f47-afc9-4f98-aa74-f83db1bee9e8”, and it searches inside the key “payloadstring” and returns elements if the key “payloadstring” contains the string “d1533f47-afc9-4f98-aa74-f83db1bee9e8”
- if i use the filter, using the condition “payloadstring” contains “d1533f47-afc9-4f98-aa74-f83db1bee9e8”, it should return the elements where “payloadstring” contains “d1533f47-afc9-4f98-aa74-f83db1bee9e8”

Otherwise using a custom field (here “payloadstring”) isn’t useful at all to filter json content…

---

<div class="post-metadata">

**Author:** ![anon7284711](https://avatars.discourse-cdn.com/v4/letter/a/ac8455/32.png) [@anon7284711](https://community.forestadmin.com/u/anon7284711)\
**Post date:** [December 9, 2024, 9:42am UTC](https://community.forestadmin.com/t/being-able-to-filter-json-content-inside-dashboard/5394/11 "2024-12-09T09:42:44Z")

</div>

Here it is:

```javascript
      search: function (query, search) {
        var searchCondition = {
          [Op.and]: [
            literal(`payload::text ilike '%${search}%'`)
          ],
        };

        query.where[Op.and][0][Op.or].push(searchCondition);

        return query;
      },
      filter({ condition, where }) {
        if (condition.operator === "contains") {
            return {
              [Op.and]: [
                literal(`payload::text ilike '%${condition.value}%'`)
              ]
            };
        }
        return null;
      },

```

However this might/will have an impact on performance depending on the size of your collection and the length of your payload column.  
You can mitigate performance impact when using the global search by removing the search function (as it would be applied on every search you make on the collection). And only filter with `contains` when you wish to find the matching payload.
