Locating Items in an Array using Angular 5 and Forming a New Array with the Located Objects

Looking for a way to extract objects from an array that have the type "noActiveServiceDashboard" and "extraAmountDashboard". I want to create a new array with only these two entries in the same format.

I've attempted using .find() or .filter() methods but I'm facing issues accessing the properties inside.

cmsContentModules: Array<{}>
let filteredModules: Array<{}> = cmsContentModules;

filteredModules 
(5) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {cid: "2462437627203", tipo: "Funcional", Titulo: "bannerDashboard", type: "bannerDashboard", literalTitle: "Jazztel rápido y fácil", …}
1: {cid: "2462444315058", tipo: "Funcional", Titulo: "noActiveServiceDashboard", type: "noActiveServiceDashboard", literalTitle: "Hola", …}
2: {cid: "2462396510226", tipo: "Funcional", type: "dashboardLineSelector", idCmsLinkItems: "2462397143052", literalErrorSubtitle: "No se puede cambiar el servicio activo", …}
3: {cid: "2462396519886", tipo: "Funcional", type: "extraAmountDashboard", gasto: "Gasto extra:", idCmsLinkDetailedUsagePage: "2462417671130", …}
4: {cid: "2462396619049", tipo: "ArrayModulos", ModulosArray: Array(14), type: "consumptionsCounters"}
length: 5
__proto__: Array(0)
typescriptangular5

Answer №1

Discovering the power of utilizing .filter()

filteredModules.filter(
      module => 
        module["type"] === "noActiveServiceDashboard" || module["type"] === "dashboardLineSelector"
    );

To access the variables, simply use the key of the value you are searching for within [].

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

Spread an all-encompassing category across a collection

What is the method in TypeScript to "spread" a generic type across a union? type Box<T> = { content: T }; type Boxes<string | number> = Box<string> | Box<number>; (Given that we are aware of when to use Boxes versus Box) ...

typescriptgenericstypesunion

Avoid Inferring as a Union Type

I am currently working on implementing a compact type-safe coordinate management system in TypeScript. It revolves around defining the origin of the coordinate as a type parameter, with functions that only accept one specific origin type. Below is a short ...

typescript

In Vue3, using the script setup feature allows for setting default property values within nested objects

I am developing a component that is designed to accept an object as a prop. In case the object is not provided, I aim to set a default value for it. <script setup lang="ts"> interface LocaleText { text: string; single?: boolean; coun ...

typescriptvue.jsvuejs3vue-composition-apivue-script-setup

Configuring routes for Angular4 router is a vital step in creating a

Issue: I am currently setting up routes for my application, aiming to structure the URL as https://localhost:4200/hero=id, where the 'id' will be dynamically selected. However, this setup is not functioning as expected. If I attempt to use a URL ...

javascriptangulartypescriptangular4-router

Updating the countdown label in NativeScript and Angular

I am currently working on a timer countdown component and have the following code: @Component({ moduleId: module.id, selector: 'time-countdown', template: `<StackLayout> <Label text="{{timeRemaining}}" ></La ...

angulartypescriptnativescriptangular2-nativescript

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

I'm trying to experiment with TypeScript. Recently, I created a simple "hello world" TypeScript module and shared it on npm. It's very basic, just has a default export: export default function hello(target: string = 'World'): void { ...

javascriptnode.jstypescriptnpmtsc

NextJS: Error - Unable to locate module 'fs'

Attempting to load Markdown files stored in the /legal directory, I am utilizing this code. Since loading these files requires server-side processing, I have implemented getStaticProps. Based on my research, this is where I should be able to utilize fs. Ho ...

reactjstypescriptnext.js

Executing a series of asynchronous HTTP calls in Angular until a specific condition is satisfied

In Angular, I am making an HTTP call that returns a promise. Currently, I am refreshing the call using setTimeout at regular intervals. Are there any built-in functions or design patterns available to handle this task more efficiently? ...

angulartypescriptpromise

Unnecessary Attributes in Type that Should be Automatically Inherited by Child Component

Within my child component, I am creating the Props interface and incorporating it into the React.Component. These Props must then be passed from the parent component to the child component. So far, everything is clear and logical. However, when I extend ...

reactjstypescriptreact-router

What is the best way to implement a condition within an ngFor loop in Angular?

I am looking to iterate the user list with a condition. <li *ngFor="let user of users" *ngIf="user.age>25"> {{user.name}} </li> I understand that this code is incorrect. However, I would like to achieve something similar. Is there any way ...

angulartypescript

What could be causing the error message "why can't shows read property

Within my Ionic-Angular application, I have successfully loaded the content from the database and printed it on the console. However, I am facing an issue where I cannot bind this content to the view. The error message that appears is displayed in https:// ...

angulartypescriptionic2ionic3

How to import an HTML file using TypeScript

I need to load an html file located in the same directory as the typescript file and return it from the function. public ...(... ) : angular.IHttpPromise<string> { ... return $http({ method: 'GET', url: &apos ...

javascriptangularjstypescript

Converting an array of objects to an array of JSON objects in TypeScript

My dilemma lies in the data I have uploaded under the _attachments variable: https://i.sstatic.net/jnFNH.png My aim is to format this data for insertion in the following structure: "_attachments": [ { "container": "string", "fileName": "string" ...

jsonmongodbangulartypescript

Two-way data binding in Angular 2 is a powerful feature that allows for

My goal is to construct a parent component called Action, which includes two child components named Infos and Localisation. I want to connect the inputs of the children with the parent model. This is the model: export class Action{ title: string; ...

typescriptangularangular2-ngmodel

Creating a JSX syntax for a simulated component and ensuring it is fully typed with TypeScript

Looking for some innovative ideas on how to approach this challenge. I have a test helper utils with added types: import { jest } from '@jest/globals' import React from 'react' // https://learn.reactnativeschool.com/courses/781007/lect ...

javascriptreactjstypescriptreact-nativejestjs

The issue of session type not updating in Next.js 14 with Next-auth 5 (or possibly version 4) is a common concern that needs to

Experimenting with new tools, I encountered an issue when trying to utilize the auth() function to access user data stored within it. TypeScript is indicating that the user does not exist in Session even though I have declared it. Here is my auth.ts file: ...

typescriptnext.jsnext-authnext.js14

Leveraging an intersection type that encompasses a portion of the union

Question: I am currently facing an issue with my function prop that accepts a parameter of type TypeA | TypeB. The problem arises when I try to pass in a function that takes a parameter of type Type C & Type D, where the intersection should include al ...

reactjstypescript

Issue encountered while executing ./node_modules/.bin/cucumber-js within GitLab CI

I've encountered an issue while setting up a continuous integration build for my node project. Despite the fact that npm run test runs smoothly in my local setup, I am facing an exception in GitLab CI. The error arises from the following test command ...

node.jstypescriptnpmgitlab-cicucumberjs

Saving a group of selected checkboxes as an array in Ionic: a step-by-step guide

I am working on a simple form with checkboxes and I need to send only the checked boxes to TypeScript. However, when I attempt to save the data by clicking the save button, I encounter an error message {test: undefined} Below is the form layout: <ion-c ...

angulartypescriptionic-framework

The NgRx Effect causing an endless cycle of HTTP requests

I am currently experiencing the following effect: initCompaniesAndSetCompanyEffect$: Observable<Action> = createEffect( (): Observable<Action> => this.actions$.pipe( ofType<changeCompanyActions.InitCompaniesAction>( ...

angulartypescriptngrx-effects