Removing a portion of an item with the power of RxJS

I possess the subsequent entity:

const myObject = {
  items:[
    {
      name: 'John',
      age: 35,
      children: [
        {
          child: 'Eric',
          age: 10,
          sex: 'M'
        },
        {
          child: 'Andrea',
          age: 4,
          sex: 'F'
        }
      ]
    },
    {
      name: 'Bob',
      age: 23,
      children: [
        {
          child: 'Oscar',
          age: 1,
          sex: 'M'
        }
      ]
    }
  ]
}

When I conduct a filtration on the findings by including this:

const source = of(myObject).pipe(
  map(x => x.items),
  map(x => {
    return x.filter(y => {
      return y.children.find(y => y.sex === 'M');
    })
  })
);

source.subscribe(x => console.log(x));

The filtration based on gender does function as intended except I aim to eliminate the female children from the JSON. In this instance, Andrea ought to be removed from the object.

Perhaps, I lack the understanding of an alternative operator that I can apply?

Answer №1

Make sure to apply the filtering function as well.

const data = from(myData).pipe(
  map(entry => entry.list),
  map(entry => {
    return entry.filter(item => {
      return item.subList.some(subItem => subItem.status === 'active');
    });
  }),
  map(entry => {
    return entry.map(item => {
      return {
        ...item,
        subList: item.subList.filter(sub => sub.status === 'active');
      };
    });
  }),
);

data.subscribe(result => console.log(result));

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

What is the best way to enable `child_process.execFile` to utilize an existing running application?

I am currently developing an Electron app that is designed to launch another application, such as Photoshop, using child_process.execFile. However, I have encountered an issue where if Photoshop is already running when child_process.execFile is called, a n ...

Customizing the font color and size of the MUI DatePicker default textfield is not supported

I'm encountering an issue with the MUI DatePicker as I am unable to customize the font color and font size of the date. Below is my code: const DateSettings = () => { const [value, setValue] = React.useState<Date | null>(); const handleC ...

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

Review this test code: import { isHtmlLinkDescriptor } from '@remix-run/react/links' import invariant from 'tiny-invariant' import { links } from '~/root' it('should return a rel=stylesheet', () => { const resp ...

The form's validation fails to recognize dynamically added input after the initial validation

I am currently working on a form that dynamically adds inputs. Whenever the user selects a different "supplier" from the addMaterialSupplier dropdown, a new input for the price is automatically added. The issue I'm facing is that when I click the bu ...

User-Preferred Dark Mode Toggle Using Material-UI and Fallback Option

I am working on implementing a toggle for "dark mode" that is functioning well. However, I want the initial state to reflect the user's dark/light preference. The problem is that prefersDarkMode seems to be set to false when the page loads. It only c ...

Exploring the Integration of Graphql Typescript Types in React Applications

I am currently working on a project that involves a React app with a Keystone.js backend and a GraphQL API. Within Keystone.js, I have a list of products and a basic GraphQL query set up like so: import gql from "graphql-tag"; export const ALL_ ...

TypeScript: Unidentified reference to 'this' within the class

typescript version: 3.9.2 The goal is to define an interface constraint that permits only non-functional member keys on the class type NonFunctionKeys<T extends {}> = { [K in keyof T]-?: T[K] extends Function ? never : K }[keyof T]; class MyClas ...

Verify whether a document retrieved from mongoDB contains a certain property

Dealing with user accounts in Mongoose, I have set it up so that the user can use their phone number to sign in: const account = await db.Account.findOne({ phone: req.body.phone }) : Now, I need to confirm if there is a property named verified in the acco ...

Issues with the display of Checkboxes and Radio Buttons in Angular 6/PrimeNg 6 are causing rendering problems

Recent issue after updating After upgrading from Angular 5.2.6 to 6.0.4 and primeng from 5.2.4 to 6.0.0-beta.1, the checkboxes and radio buttons appear as expected but do not display the check mark within the box when selected, nor the dot within the radio ...

How can I detect click events on SVG path element using Angular?

Is it possible to detect click events on SVG elements such as path or g using Angular? To see an example of this, check out this demo. Right now, if a (click) event binding is added to the svg elements, the click() event handler will trigger. However, how ...

Error message: It seems the spatial reference for this ESRI object is missing

Currently, I am utilizing Esri GIS to load the center location from an address. However, I am encountering an issue as I am using a geocoder from Google to obtain longitude and latitude, which is resulting in the following error message: TypeError: this.s ...

Tips for passing a Typescript variable in a jquery callback function

Within an Angular 6 component, I am utilizing a jQuery callback function. This component contains a TypeScript variable, and when a click event occurs on the webpage, the callback function is triggered. However, I am struggling to figure out how to pass th ...

A beginner's guide to integrating Socket.io with Express.JS using the Express application generator

Currently, I am attempting to utilize Socket.io alongside Express.JS by using the Express application generator. While searching for solutions, I came across some helpful advice on how to achieve this (check out Using socket.io in Express 4 and express-gen ...

Avoid special characters (metacharacters and diacritical marks)

When my program consumes data from an API, it receives the following output: "<a href=\"http:\/\/www.website2.com\/\" target=\"_blank\">Item card<\/a>","<img src=\"https:\/\/website.com ...

During the test, an unexpected error occurred: Configuration file error! Module 'karma-remap-istanbul' not found

Whenever I run ng test, I keep encountering the following error message - what could be causing this issue? An unhandled exception occurred: Error in configuration file! Error: Module 'karma-remap-istanbul' cannot be found Below is the content ...

The Transform feature doesn't seem to be functioning as expected within the Bootstrap

I was experimenting with creating a simple transform transition animation using css and js, so I wrote the following code: (test page) <!DOCTYPE html> <html> <head> <style type="text/css"> *{ ...

Testing specific components within an Angular 2 folder using unit tests

Our current project scenario involves: Implementing new UI changes in the project. Updating test cases for components with outdated UI test cases. Due to the presence of old UI test cases in all components, they are failing simultaneously, making it diff ...

eBay API request error: "You do not have the necessary permissions to complete the request."

While working on integrating the eBay API, I encountered an issue with creating a payment policy. Following the instructions provided in this guide , I generated a token and sent it using Postman. However, I received an error: { "errors": [ ...

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

Eliminating divs and preserving content

Is there a way to remove certain DIV elements using jQuery or pure JavaScript without affecting the content within them? Here is an example structure: <div class="whatever_name"> <div class="whatever_name"> <h2>subtitle</h2&g ...