Telegram API Question posted in
A comprehensive official documentation can be found here.

How to filter a simple table/array in REACT – Telegram API

im searching for a way to easily filter and maybe sort the following table. I tried filtering it with

      {data.getInteressentListing.edges.filter(node.name => node.name.includes('J')).map(({node}) => (

but that did not work. Also i need something like a search bar filtering not only the name. It should filter for all colums at the same time. Maybe you can give me some sugestions or a easy solution on this.

Thanks in advance

Daniel

Here is the code of my working simple table

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import Table from 'react-bootstrap/Table'

export const GET_POSTS = gql`
query   {
  getInteressentListing {
    edges {
      node {
        id
        Name
        Vorname
        Quelle
        Artikel
        Land
        Ort
        Tel
        Mobil
        EMail
        URL
        Whatsapp
        Telegram
        Notizen
        Geschlecht
      }
    }
  }
}
`;


const rowStyles = (post, canEdit) => canEdit(post)
  ? { cursor: 'pointer', }
  : {};

const PostViewer = ({ canEdit, onEdit }) => (
  <Query query={GET_POSTS}>
    {({ loading, data }) => !loading && (
      <Table >
        <thead>
          <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Land</th>
            <th>Ort</th>
            <th>Tel.</th>
            <th>Mobil</th>
            <th>E-Mail</th>
            <th>Geschlecht</th>
          </tr>
        </thead>
        <tbody>
          {data.getInteressentListing.edges.map(({node}) => (
            <tr
              key={node.id}
              style={rowStyles(node, canEdit)}
              onClick={() => canEdit(node) && onEdit(node)}
            >
    <td> {node.Name} </td>
    <td> {node.Vorname} </td>
    <td> {node.Land} </td>
    <td> {node.Ort} </td>
    <td> {node.Tel} </td>
    <td> {node.Mobil} </td>
    <td> {node.EMail} </td>
    <td> {node.Geschlecht} </td>
             
            </tr>
          ))}
        </tbody>
      </Table>
    )}
  </Query>
);
PostViewer.defaultProps = {
  canEdit: () => true,
  onEdit: () => null,
};

export default PostViewer;

That is the format my data looks like when i get it back. it has the node inside:

{
  "data": {
    "getInteressentListing": {
      "edges": [
        {
          "node": {
            "id": "1294",
            "Name": "Felix",
            "Vorname": "Hase",
            "Quelle": "Facebook",
            "Artikel": "Briefe",
            "Land": "Deutschland",
            "Ort": "KiKaLand",
            "Tel": "+49 0256/659552",
            "Mobil": "01525659565",
            "EMail": "[email protected]",
            "URL": "www.felixderhase.de",
            "Whatsapp": true,
            "Telegram": false,
            "Notizen": "Läuft im Fernsehen",
            "Geschlecht": "Divers"
          }
        },
        {
          "node": {
            "id": "1295",
            "Name": "Daniel",
            "Vorname": "Morgner",
            "Quelle": "eBay-Kleinanzeigen",
            "Artikel": "Omega",
            "Land": "Deutschland",
            "Ort": "Musterort",
            "Tel": "045692582",
            "Mobil": "015412,0",
            "EMail": "[email protected]",
            "URL": "www.daniel.de",
            "Whatsapp": false,
            "Telegram": true,
            "Notizen": "asdasd",
            "Geschlecht": "Männlich"
          }
        },
        {
          "node": {
            "id": "1296",
            "Name": "Muster",
            "Vorname": "Max",
            "Quelle": "eBay-Kleinanzeigen",
            "Artikel": "Musterartikel",
            "Land": "Musterland",
            "Ort": "Musterort",
            "Tel": "+49255225488",
            "Mobil": "+49536256",
            "EMail": "[email protected]",
            "URL": "www.mustermann.org",
            "Whatsapp": true,
            "Telegram": null,
            "Notizen": "Hat viele Muster",
            "Geschlecht": "Männlich"
          }
        },
        {
          "node": {
            "id": "1297",
            "Name": "",
            "Vorname": "Peter",
            "Quelle": null,
            "Artikel": "Steine",
            "Land": "Deutschland",
            "Ort": "Musterort",
            "Tel": "07228562345",
            "Mobil": "01525654654654",
            "EMail": "[email protected]",
            "URL": "peter-walter.de",
            "Whatsapp": null,
            "Telegram": null,
            "Notizen": "Verkauft Steine",
            "Geschlecht": "Männlich"
          }
        },
        {
          "node": {
            "id": "1298",
            "Name": "Jakob",
            "Vorname": "Hund",
            "Quelle": null,
            "Artikel": "Hundefutter",
            "Land": "Traumland",
            "Ort": "Bagdad",
            "Tel": "0152519188723",
            "Mobil": "025105153",
            "EMail": "[email protected]",
            "URL": null,
            "Whatsapp": null,
            "Telegram": true,
            "Notizen": "Ist ein Hund",
            "Geschlecht": "Männlich"
          }
        }
      ]
    }
  }
}

I request the data in my Query see code above

Tags:

2

Answers


  1. 0

    Step 1: I tried with mock data in the state

    this.state = {
  getInteressentListing: [
    {
      id: 1,
      Name: "Daniel",
      Vorname: "Daniel",
      Land: "Germany",
      Ort: "Deutschland",
      Tel: "9342423434",
      Mobil: "893434343434",
      EMail: "[email protected]",
      Geschlecht: "Male"
    },
    {
      id: 2,
      Name: "Morgner",
      Vorname: "Morgner",
      Land: "Germany",
      Ort: "Denmark",
      Tel: "92323232344",
      Mobil: "942343434344",
      EMail: "[email protected]",
      Geschlecht: "Male"
    },
    {
      id: 3,
      Name: "Jeba",
      Vorname: "Jeba",
      Land: "India",
      Ort: "Chennai",
      Tel: "8777788232323",
      Mobil: "923232323233",
      EMail: "[email protected]",
      Geschlecht: "Male"
    }
  ],
  selectedFilter: "id",
  filterByText: ""
};

    Step 2: Input change input to set on state

    inputChange = (event) => {
  const { name, value } = event.target;
  this.setState({ [name]: value });
};

    Step 3: Written the filter function like below inside the render method

    const filteredList = this.state.getInteressentListing.filter((item) => {
  if (this.state.selectedFilter && this.state.filterByText) {
    if (this.state.selectedFilter === "id") {
      return (
        item[this.state.selectedFilter] &&
        item[this.state.selectedFilter].toString() ===
          this.state.filterByText.toString()
      );
    } else {
      return (
        item[this.state.selectedFilter] &&
        item[this.state.selectedFilter]
          .toLowerCase()
          .includes(this.state.filterByText.toLowerCase())
      );
    }
  } else {
    return item;
  }
});

    Step 4: Finally the html template will be in render method like below,

    <div className="App">
    <select
      name="selectedFilter"
      onChange={this.inputChange}
      value={this.state.selectedFilter}
    >
      <option disabled value="" required>
        Search by
      </option>
      <option value="id">Id</option>
      <option value="Name">Name</option>
      <option value="Vorname">Vorname</option>
      <option value="Land">Land</option>
      <option value="Ort">Ort</option>
      <option value="Tel">Tel</option>
      <option value="Mobile">Mobile</option>
      <option value="EMail">EMail</option>
      <option value="Geschlecht">Geschlecht</option>
    </select>
    <input
      value={this.state.filterByText}
      name="filterByText"
      onChange={(e) => {
        this.inputChange(e);
      }}
      placeholder="Type here..."
    />
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Vorname</th>
          <th>Land</th>
          <th>Ort</th>
          <th>Tel.</th>
          <th>Mobil</th>
          <th>E-Mail</th>
          <th>Geschlecht</th>
        </tr>
      </thead>
      <tbody>
        {filteredList.map((node) => (
          <tr key={node.id}>
            <td> {node.Name} </td>
            <td> {node.Vorname} </td>
            <td> {node.Land} </td>
            <td> {node.Ort} </td>
            <td> {node.Tel} </td>
            <td> {node.Mobil} </td>
            <td> {node.EMail} </td>
            <td> {node.Geschlecht} </td>
          </tr>
        ))}
        {filteredList.length === 0 && (
          <tr>
            <td colSpan="8" style={{ textAlign: "center" }}>
              No Record Found
            </td>
          </tr>
        )}
      </tbody>
    </table>
  </div>

    DEMO

    Login or Signup to reply.
  2. 0

    To search the entire row instead of a single field the user can actually do this based on the:

    const filteredList = this.state.getInteressentListing.filter((item) => {
  if (this.state.selectedFilter && this.state.filterByText) {
    const vv = Object.values(item);
    for (let i = 0; i < vv.length; i++) {
      vv[i] = vv[i] !== null ? vv[i].toString().toLowerCase() : vv[i];
    }

    return vv
      .join("")
      .includes(this.filterByText.toString().toLowerCase());
  } else {
    return item;
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search