Javascript - How can I loop through an object that has a status active/inactive and only show No Results once for inactive status without duplicate each records?

user3345883
March 9, 2024
129 views
0 votes
2 Answers

I’m stuck with a problem whereby I need to show only records that are active and hide inactive ones from a REST API call that I’m making.

If all records are inactive, just show only single message saying "No Records Found" for instance.

const [tenants, setTenants] = useState([]);
const tenant_status_active = 0;

<table className="table table-striped table-hover table-responsive caption-top">
  <caption>Tenants Info:</caption>
  <thead className="table-dark">
    <tr>
      <th>Room No.:</th>
      <th>Name</th>
      <th>E-mail Address</th>
      <th>Is Deposit Paid?</th>
      <th>Lease End Date</th>
      <th colSpan={2}>Action</th>
    </tr>
  </thead>
  <tbody>
    {tenants.map(tenant => (tenant.tenantStatus !== tenant_status_active)
      ? (
        <tr>
          <td colSpan={7} className="text-danger">No Results</td>
        </tr>
      )
      : (
        <tr key={tenant.id}>
          <td>{tenant.roomNumber}</td>
          <td>{tenant.name} {tenant.surname}</td>
          <td>{tenant.email}</td>
          <td>{tenant.leaseEndDate}</td>
          <td>
            <button
              aria-label="Delete tenant"
              className="btn btn-danger" 
              onClick={() => deleteTenant(tenant)}
            >
              Delete
            </button>
          </td>
          <td>
            <button
              aria-label="Update tenant"
              className="btn btn-primary" 
              onClick={() => updateTenant(tenant)}
            >
              Update
            </button>
          </td>
        </tr>
      )) 
    }
  </tbody>
  <tfoot className="table-dark">
    <tr>
      <td colSpan={7}><small>Table Data &copy;</small></td>
    </tr>
  </tfoot>
</table>

Tried to do a lot of google search for answers, also here on Stack overflow, and asked my instructor from Udemy for help. Unfortunately nothing is forthcoming at the moment.

Answers

You can filter out the inactive records and check active tenant array length:

const activeTenants = tenants.filter(tenant => tenant.tenantStatus === tenant_status_active);

return <table className="table table-striped table-hover table-responsive caption-top">
             <caption>Tenants Info:</caption>
                    <thead className="table-dark">
                        <tr>
                            <th>Room No.:</th>
                            <th>Name</th>
                            <th>E-mail Address</th>
                            <th>Is Deposit Paid?</th>
                            <th>Lease End Date</th>
                            <th colSpan={2}>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {
                            tenants.length === 0 ? 
                                (<tr>
                                    <td colSpan={7} className="text-danger">No Results</td>
                                </tr>)
                            :
                            tenants.map(tenant => 
                            (
                                <tr key={tenant.id}>
                                    <td>{tenant.roomNumber}</td>
                                    <td>{tenant.name} {tenant.surname}</td>
                                    <td>{tenant.email}</td>
                                    <td>{tenant.leaseEndDate}</td>
                                    <td>
                                        <button aria-label="Delete tenant" className="btn btn-danger" 
                                        onClick={ () => deleteTenant(tenant) }>
                                            Delete
                                        </button>
                                    </td>
                                    <td>
                                        <button aria-label="Update tenant" className="btn btn-primary" 
                                        onClick={ () => updateTenant(tenant) }>
                                            Update
                                        </button>
                                    </td>
                                </tr>
                            )) 
                         }
                    </tbody>
                    <tfoot className="table-dark">
                        <tr>
                            <td colSpan={7}><small>Table Data &copy;</small></td>
                        </tr>
                    </tfoot>
                </table>

Filter the tenants state for the tenants that have the correct active status value, and conditionally render either the fallback UI if that array is empty or the mapped JSX.

Example:

const [tenants, setTenants] = useState([]);
const tenant_status_active = 0;

const activeTenants = React.useMemo(() => {
  return tenants.map(tenant => tenant.tenantStatus !== tenant_status_active);
}, [tenants, tenant_status_active]);

return (
  <table className="table table-striped table-hover table-responsive caption-top">
    <caption>Tenants Info:</caption>
    <thead className="table-dark">
      ...
    </thead>
    <tbody>
      {activeTenants.length
        ? activeTenants.map(tenant => ( // <-- truthy length, map array elements
          <tr key={tenant.id}>
            <td>{tenant.roomNumber}</td>
            <td>{tenant.name} {tenant.surname}</td>
            <td>{tenant.email}</td>
            <td>{tenant.leaseEndDate}</td>
            <td>
              <button
                aria-label="Delete tenant"
                className="btn btn-danger" 
                onClick={() => deleteTenant(tenant)}
              >
                Delete
              </button>
            </td>
            <td>
              <button
                aria-label="Update tenant"
                className="btn btn-primary" 
                onClick={() => updateTenant(tenant)}
              >
                Update
              </button>
            </td>
          </tr>
        ))
        : ( // <-- falsey length, render fallback
          <tr>
            <td colSpan={7} className="text-danger">No Results</td>
          </tr>
        )
      }
    </tbody>
    <tfoot className="table-dark">
      ...
    </tfoot>
  </table>
);

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How can I loop through an object that has a status active/inactive and only show No Results once for inactive status without duplicate each records?

Answers