Nested JSON doesn't work

[johannydls]

On my JSON, I have this:

{
  "employees": [
    {
      "id": 1,
      "name": "Jason Bourne",
      "employeeId": "us2323",
      "city": "New York",
      "contact": {
        "email": "jason.bourne@mail.com",
        "phone": "5511922118522"
      }
    },
    {
      "id": 2,
      "name": "Mary",
      "employeeId": "us6432",
      "city": "San Jose",
      "contact": {
        "email": "mary@mail.com",
        "phone": "5511974545522"
      }
    },

On my settings, I have this:

settings = {
    columns: {
      id: {
        title: 'ID'
      },
      name: {
        title: 'Name'
      },
      employeeId: {
        title: 'Employee No.'
      },
      
      "contact.email":{
        title: 'Contact'
      }
    },
    actions: {
      add: false
    }
  };

In the rendered table, nothing is shown in the Contact field.

If I change "contact.email" to just "contact", in the table processed I have [object Object]. And keeping it that way, if I add "valuePrepareFunction" to get the "email", in the rendered table the correct value is shown. However, I can not filter because the value remains [object Object] in the filter. If I try to edit, the [object Object] value is also shown in the input field.

Is there any way I can list nested objects, filter by the correct value (instead of [object Object]) or edit?

[15206125206]

I met the same problem, how to solve it?

[alshoja]

can anyone please help with this problem got the same issue for me??

[johannydls]

I met the same problem, how to solve it? (@15206125206)

can anyone please help with this problem got the same issue for me?? (@alshoja)

I solved this problem as follows:

contact: {
        title: "Contact",
        valuePrepareFunction: (contact) => {
          return contact.email;
        },
        filterFunction(contact?: any, search?: string): boolean {
          let match = true;
          Object.keys(contact).map(u => contact.email).filter(it => {
            match = it.toLowerCase().includes(search);
          });

          if (match || search === '') {
            return true;
          } else {
            return false
          }
        },
        filter: true,
        compareFunction: (direction: any, a: any, b: any) => {
          let first = typeof a.email === 'string' ? a.email.toLowerCase(): a.email;
          let second = typeof b.email === 'string' ? b.email.toLowerCase(): b.email;

          if (first < second) {
            return -1 * direction;
          }
          if (first > second) {
            return direction;
          }
          return 0;
        }
      }

The filterFunction and compareFunction is to filter/compare exactly by email value, not by the value "[Object object]";