Filtering rows in angular based on the current data's id

     currData = {
    id: "iStyle1",
    status: "PENDING"
  };

  data = [
    {
      id: "splitStyle1",
      rows: [
        {
          id: "1cUMlNRSapc5T",
          row: 2,
          sequence: 2,
          status: "ACTIVE",
          assetType: {
            id: "iStyle1",
            name: "Style"
          }
        }
      ]
    },
    {
      id: "splitStyle2",
      rows: [
        {
          id: "1cUMlNRSapc5T",
          row: 2,
          sequence: 2,
          status: "ACTIVE",
          assetType: {
            id: "iStyle1",
            name: "Style"
          }
        },
        {
          id: "1cUMlNRSapc5T",
          row: 2,
          sequence: 2,
          status: "ACTIVE",
          assetType: {
            id: "iStyle2",
            name: "Style"
          }
        }
      ]
    },
    {
      id: "splitStyle3",
      rows: []
    },
    {
      id: "splitStyle4",
      rows: []
    }
  ];

I attempted to utilize this information:

const result = this.data.flatMap(item => item.rows.filter((assetType: any) => assetType.id === this.currData.id));

however, it resulted in an empty array. and

const result = this.data.filter((x: any) => x.rows.some((rows: any) => x.rows.filter((y: any) => y)));
    console.log(result)

it fails to exclude the iStyle2, and I aim to eliminate the iStyle2 from the rows. Only the data containing iStyle2 in the rows should be displayed.

The desired output should be:

[
    {
      id: "splitStyle1",
      rows: [
        {
          id: "1cUMlNRSapc5T",
          row: 2,
          sequence: 2,
          status: "ACTIVE",
          assetType: {
            id: "iStyle1",
            name: "Style"
          }
        }
      ]
    },{
      id: "splitStyle2",
      rows: [
        {
          id: "1cUMlNRSapc5T",
          row: 2,
          sequence: 2,
          status: "ACTIVE",
          assetType: {
            id: "iStyle1",
            name: "Style"
          }
        }
      ]
    }
]

Find the code here: https://stackblitz.com/edit/angular-owuavn?file=src/app/app.component.ts.

Answer №1

Perhaps this solution meets your needs:

const information = [
    {
        identifier: "splitStyle1",
        entries: [
            {
                identifier: "1cUMlNRSapc5T",
                rowNumber: 2,
                sequenceNum: 2,
                state: "ACTIVE",
                category: {
                    identifier: "iStyle1",
                    designation: "Style"
                }
            }
        ]
    },
    {
        identifier: "splitStyle2",
        entries: [
            {
                identifier: "1cUMlNRSapc5T",
                rowNumber: 2,
                sequenceNum: 2,
                state: "ACTIVE",
                category: {
                    identifier: "iStyle1",
                    designation: "Style"
                }
            },
            {
                identifier: "1cUMlNRSapc5T",
                rowNumber: 2,
                sequenceNum: 2,
                state: "ACTIVE",
                category: {
                    identifier: "iStyle2",
                    designation: "Style"
                }
            }
        ]
    },
    {
        identifier: "splitStyle3",
        entries: []
    },
    {
        identifier: "splitStyle4",
        entries: []
    }
];

const updatedData = [];

information.forEach(item => {
    const filteredEntries = item.entries.filter(entry => entry.category.identifier !== 'iStyle2');

    updatedData.push({
        identifier: item.identifier,
        entries: filteredEntries
    })
})

console.log(updatedData);

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

Steps to create folders in dat.gui:

I'm attempting to incorporate folders for the lights in a three.js project that I borrowed from a three.js example. However, I am struggling to make it work. From what I gather, I should use f1=add.folder('light1') and then somehow add the p ...

Comparison between WAMP and Live server integration with Facebook for connecting applications

I've been facing some challenges while integrating my website with Facebook Connect. I have been following the instructions provided in this guide. When attempting to run the following code from localhost, please note that for security reasons, my ap ...

Exploring the process of retrieving parameters within a component using React Router DOM version 4

I am struggling with the following code: <BrowserRouter> <Route path="/(:filter)?" component={App} /> </BrowserRouter> In previous versions of React Router, wasn't the filter param or '' on the root supposed to be in ...

looking to showcase the highest 'levelNumber' of elements within an array

arr1 = [ { "levelNumber": "2", "name": "abc", }, { "levelNumber": "3", "name": "abc" }, { "levelNumber": "3", "name": &quo ...

Decoding arrays of JSON data

Receiving "chunked" data (json arrays) on the front-end via "xhr" (onprogress). Handling delayed chunks is easy - just remember response length and offset. The challenge comes when multiple "chunked" responses arrive simultaneously, resulting in an unpars ...

Can a website trigger an alarm on a user's iPhone without their permission?

Even though I have limited experience with HTML, CSS, and Javascript, I am curious if it is possible to create a basic website that can trigger an alarm on the user's device by simply clicking a button. For example, imagine a scenario where a user is ...

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

Various web browsers may exhibit varying behaviors when processing extremely lengthy hyperlinks

I am curious to understand why browsers handle long URLs differently based on how they are accessed. Let me explain further: Within my application, there is a link to a specific view that may have a URL exceeding 2000 characters in length. I am aware that ...

vm.property compared to this.property

Although it may seem like a simple question, I am in need of some clarification. Currently, I have vuejs running on a single page of my website. The vm app is running in the footer script of the page without utilizing an app.js file or templates/components ...

Steps for submitting a form once all inputs have been verified

$('#f_name, #l_name').change(function(){ if($(this).val().length < 2) { $(this).css('border', '1px solid red'); alert('names must be at least 2 symbols'); check ...

What is the method to retrieve the index or row number using the map function in Google Sheets?

Currently, I am attempting to retrieve the row number where the row meets certain criteria. However, I seem to be encountering an issue: Instead of getting the desired result, I am obtaining an array like this: [,,2] Although I have attempted using filter ...

What is the purpose of the `Bitwise operator |` in the `d3.shuffle` source code and how can it be understood

Learning about the Bitwise operator | can be found in the document here and a helpful video tutorial here. However, understanding the purpose and significance of | may not come easily through basic examples in those resources. In my exploration of the sou ...

Refreshing a Thymeleaf table dynamically without having to reload the entire page

I am currently using the Thymeleaf attribute to render data, but I am now looking to add a "Search" button without reloading the page. Within the attribute departments, I am rendering a List<Department> from the database. While I understand how to a ...

The issue lies with the Cookies.get function, as the Typescript narrowing feature does not

Struggling with types in TypeScript while trying to parse a cookie item using js-cookie: // the item 'number' contains a javascript number (ex:5) let n:number if(typeof Cookies.get('number')!== 'undefined'){ n = JSON.pars ...

The module cannot be located: Unable to find '../typings' in '/vercel/path0/pages'

Having trouble deploying my Next.js website through Vercel. It seems to be stuck at this stage. Can someone assist me, please? I've attempted deleting the node_modules folder and package-lock.json, then running npm install again, but unfortunately it ...

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

The Workbench has "Rejected the setting of an insecure header 'content-length'"

While working on implementing a simple xhr abstraction, I encountered a warning when trying to set the headers for a POST request. Strangely, I noticed that the issue might be related to setting the headers in a separate JavaScript file. This is because wh ...

Enable/Deactivate Chrome Extension Content Script

I am exploring ways to enable users to toggle a Chrome content script with the click of a button. It appears that using chrome.browserAction is the most efficient method for achieving this. However, when I include the following code snippet: chrome.brow ...

Decoding Dynamic JSON Data into a Map Using Angular

When working with Angular's http client to fetch data from an API, I create DTOs using typescript interfaces. One of the endpoints returns a JSON object that contains dynamic keys which I want to map into a Map. After trying out different approaches, ...

Having trouble locating the export in the TypeScript module

Having a situation where there is a file with an exported object: let btypes:{[key:string]:any} = { "key1":val, //... } export {btypes} I even attempted to use export default btypes Upon importing it using: import {btypes} from "../types& ...