Hide null/empty rows in a table

Hello Everyone,

I am sending query via GraphQL and then populate a table from the response I'm getting. The issue I'm facing is that when sending the request, there is always a null value which gets added to the table.

This is the query I send:

query ($fname: String!) {
  people (where: {name: $fname}) {
    child {
      firstname {
      name
      }
      middlename {
        name
      }
      lastname {
        name
      }
      phone {
        name
      }
      email {
        name
      }
      dob {
        name
      }
      eid {
        name
      }
    }
  }
}

The response is as follows:

{
  "data": {
    "people": [
      {
        "child": null
      },
      {
        "child": {
          "firstname": {
            "name": "miguel"
          },
          "middlename": {
            "name": "c"
          },
          "lastname": {
            "name": "sanford"
          },
          "phone": {
            "name": "695.587.3736 x598"
          },
          "email": {
            "name": "mack_macejkovic@yahoo.com"
          },
          "dob": {
            "name": "2021-12-06T01:27:22.597Z"
          },
          "eid": {
            "name": "245084975"
          }
        }
      }
    ]
  }
}

As you can see, the first child object is null and this is how it shows in the table:

The people column is automatically created and it shows all responses from the query, and my issue is with the first one.

To have a better understanding of my displayedData:

image

I create custom columns to tabulate the response as follows:

{{GetChildRecords.data.people[i].child.firstname.name}}

I change "firstname" for each other column.

Solutions I have tried:

    • Change people[i] to people to people[1]

When I do that, both rows are are populated with the same data.

One other I might face is that I might have multiple children record which are not null. So restricting an index is not an option.

    • Dynamically show column
{{formatDataAsObject(Child_Record.displayedData).people[i].child.length!==0}}

Not sure if I used the above method correctly, but there is nothing changing.

Hi @yazanakkad! Can you use .filter() to remove any null values if they exist (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)?

You could add this code as a transformer on your GraphQL query rather than running a separate js query