Filtering data on objects in Angular can be achieved by utilizing the built-in

Retrieving data from the backend using this function:

  private fetchData(): void {
    this.dataService.fetchData().pipe(
      tap((response: any) => {
        this.persons = response.results;
        this.familyMembersTrue = this.persons.filter(x => x.is_family_member === 'false')
      }),
      takeUntil(this.onDestroy)
    ).subscribe();
  }

and console.log(response) displays JSON like below

{
    "count": 38,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 113,
            "foreigner": false,
            "outside_community": false,
            "nipt": "",
            "nid": "G45675570K",
            "is_family_member": true
        },
        {
            "id": 115,
            "foreigner": false,
            "outside_community": false,
            "nipt": "",
            "nid": "K30776771A",
            "is_family_member": false
        },
        {
            "id": 116,
            "foreigner": false,
            "outside_community": false,
            "nipt": "",
            "nid": "J305070577",
            "is_family_member": false
        }...
      ]
    }

I am interested in data with "is_family_member": false, so I have created

this.familyMembersTrue = this.persons.filter(x => x.is_family_member === 'false')

This section of the code shows as empty.

Any ideas on how to display data with "is_family_member": false?

Answer №1

Try modifying the condition to:

this.isFamilyMember = this.persons.filter(x => x.is_family_member === true);

Test it out and see if that solves the issue.

Answer №2

Consider utilizing only the double equals (==) operator. When using 3 equal signs (=), you are comparing both type and value, or attempt removing quotes as you may be comparing a boolean with a string.

Answer №3

@Zunayed Shahriar's statement can be further streamlined.

this.individualsNotFamily = this.people.filter(person => !person.is_family_member);

REVISED: This method assumes that the is_family_member property is consistently boolean, as clarified by @Zunayed Shahriar in a comment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node.js API requests often result in undefined responses

As a newcomer to Node.JS, I am currently experimenting with calling a REST API using the GET method. I have utilized the 'request' package available at this link. While the call functions correctly, I encounter an issue when attempting to return ...

React eliminates all white spaces

Presented here is a compilation of various span elements: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> Accompanied by the CSS style for these elements: span{ bac ...

Having trouble with `request.auth.session.set(user_info)` in HapiJS?

I've encountered an issue with my strategy that is defined on a server.register(). Although I followed a tutorial, the code seems to be copied verbatim from it and now it's not functioning as expected. server.auth.strategy('standard&apo ...

Creating a new array in Vue.js by filtering the results of a promise iteration

Is there a way to use the splice method to insert promise values from an old array into a new one for vue reactivity? I'm encountering an issue where the newArray remains empty and does not receive any values. Check out this link for more information. ...

ajax encountering error but producing correct result

Below is the code snippet for a function: side= 'car'; var request_checkUrl = '/antibot/antibot_data?script=' + side; $.ajax({ url: request_checkUrl, dataType: 'application/json', complete: function(data){ ...

Working with HTML5 canvas to draw multiple images

Here is the code I'm working with: http://jsfiddle.net/zyR9K/4/ var Enemies = { x: 25, y: 25, width: 20, height: 30, speed: 0.5, color: "#000", draw: function () { canvas.fillStyle = ...

The sliding hamburger menu children fail to move in unison with the parent

I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div. You can see how it currently loo ...

The Tools of the Trade: TypeScript Tooling

Trying out the amazing Breeze Typescript Entity Generator tool but encountering an error consistently. Error: Experiencing difficulty in locating the default implementation of the 'modelLibrary' interface. Options include 'ko', 'b ...

The power of Typescript shines in its ability to ensure type safety when working with conditional

I am struggling with typing a simple function in Typescript that takes a union type and a boolean as parameters. Here is the code snippet: type A = 'a' | 'A'; function f(a: A, b: boolean): string { if (b) { switch (a) { ...

Angular 5: Steps to send an event from authguard to header in Angular application

I am struggling to send out an event from the authguard component to the header component. Event broadcasting setup @Injectable() export class BroadcastService { public subject = new Subject<any>(); sendMessage(message: string) { this.subjec ...

What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?

I need help adding a popover to an event in a resource timeline using fullcalendar/vue ^5.3.1 in Vue ^2.6.11 with ^2.1.0 of bootstrap-vue. Although I found some guidance on Stack Overflow, the solution involving propsData and .$mount() doesn't feel l ...

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

Which rxjs operator functions similarly to concatmap, but delays the firing of the next request until the current one is completed?

Imagine if I need to make multiple api calls with a high risk of encountering race conditions. If I send 3 requests simultaneously to update the same data on the server, some of the information could be lost. In order to prevent this data loss, I want to ...

What is the process for triggering data-dismiss after the href has been activated?

Could someone help me with this issue? <a class='btn btn-danger' href='page.html'>Delete</a> I am trying to activate the "data-dismiss" attribute after the "href" is activated. My initial attempt was using this code: < ...

What is the best way to incorporate custom events into classes using Node.js?

Recently delving into node, I have a question about adding custom events to a class. In the code below, I attempted to create a simple farm class where the number of animals changes and triggers an event called totalChanged. let events = require('eve ...

How can I replace this jQuery state change with the appropriate Angular code?

Within a component, I have a subject that triggers a .next(value) and initiates the following jQuery logic: if (this.isOpen) { jQuery(`#preview-${this.index}`). stop().slideDown('fast'); } else { jQuery(`#preview-${this.index}` ...

Communication between Angular services and the issue of 'circular dependency detected' alerts

I am encountering a circular dependency issue with my AuthenticationService and UserService. The UserService is included within the AuthenticationService, but when I try to use AuthenticationService in UserService as shown below: constructor(private authS ...

Having trouble with updating links in HTML pages?

I'm having trouble updating all the links in my HTML file. The code I have isn't working as expected. var fs = require('fs'); fs.readFile(__dirname + '/index.html', 'utf8', function(err, html){ if(!err){ html = ...

Is it possible to convert an array into an object?

I'm attempting to restructure an array of objects into a new object where the label property serves as the key for multiple arrays containing objects with that same label. Check out this JSBin function I created to map the array, but I'm unsure ...

Experiencing an issue in Test Cafe when attempting to click on an invisible link using the Client Function

I need to find a way to click on an invisible button in HTML. I attempted to use ClientFunction, however I encountered an error related to the element. import { Selector,ClientFunction } from 'testcafe'; fixture('Clicking Invisible link&apo ...