Using Typescript and Angular to efficiently filter an array of objects

Question

Using Typescript and Angular to efficiently filter an array of objects

I am dealing with an array of objects that contain a "category" attribute. My goal is to filter this array and retrieve only the objects with the "tech" category.

An error message is being displayed stating that "filter" does not exist on type {}

stocks-list.ts

import { Stock } from './Stock';

export const STOCKS: any[] = [
  { id: 11, symbol: 'AAPL', name: 'Apple', category: 'Tech' },
];

stock.service.ts

import { Injectable } from '@angular/core';
import { Stock } from './Stock';

import { STOCKS } from './stocks-list';

@Injectable({
  providedIn: 'root'
})


export class StockService {


  constructor() { }
  techStocks: Stock[];
  getTechStocks(): Stock[] {
    this.techStocks = STOCKS;


    return this.techStocks.filter(xx => xx.category = 'Tech');
  }
}

javascript angular typescript

Answer 1

Answer №1

To make the correct comparison, you just have to replace xx.category = 'Tech' (which updates) with xx.category === 'Tech' (which tests equality)

Here is a simple example to demonstrate:

const stocks = [
  { id: 11, symbol: 'AAPL', name: 'Apple', category: 'Tech' },
  { id: 12, symbol: 'AAPL', name: 'Orange', category: 'Fruit' },
  { id: 13, symbol: 'AAPL', name: 'Not Apple', category: 'Fruit' },
];
console.log(stocks.filter(xx => xx.category = 'Tech'));

In this scenario, every element's category is being updated to 'Tech' (as seen in the output of the first snippet where all categories are now 'Tech'), and then you are returning 'Tech' to the filter function which always evaluates as 'true'

    console.log(foo = "bar"); // The assignment operation also returns the value
    console.log(!!foo); // A non-null value is evaluated as `true` (as boolean)

Therefore, your filter function will always check if (!!'Tech' === true) (always resulting in true), hence returning all elements that were updated.

The solution is simply to use === for the correct boolean evaluation

const stocks = [
  { id: 11, symbol: 'AAPL', name: 'Apple', category: 'Tech' },
  { id: 12, symbol: 'AAPL', name: 'Orange', category: 'Fruit' },
  { id: 13, symbol: 'AAPL', name: 'Not Apple', category: 'Fruit' },
];
console.log(stocks.filter(xx => xx.category === 'Tech'));

Answer 2

To make the correct comparison, you just have to replace xx.category = 'Tech' (which updates) with xx.category === 'Tech' (which tests equality)

Here is a simple example to demonstrate:

const stocks = [
  { id: 11, symbol: 'AAPL', name: 'Apple', category: 'Tech' },
  { id: 12, symbol: 'AAPL', name: 'Orange', category: 'Fruit' },
  { id: 13, symbol: 'AAPL', name: 'Not Apple', category: 'Fruit' },
];
console.log(stocks.filter(xx => xx.category = 'Tech'));

In this scenario, every element's category is being updated to 'Tech' (as seen in the output of the first snippet where all categories are now 'Tech'), and then you are returning 'Tech' to the filter function which always evaluates as 'true'

    console.log(foo = "bar"); // The assignment operation also returns the value
    console.log(!!foo); // A non-null value is evaluated as `true` (as boolean)

Therefore, your filter function will always check if (!!'Tech' === true) (always resulting in true), hence returning all elements that were updated.

The solution is simply to use === for the correct boolean evaluation

const stocks = [
  { id: 11, symbol: 'AAPL', name: 'Apple', category: 'Tech' },
  { id: 12, symbol: 'AAPL', name: 'Orange', category: 'Fruit' },
  { id: 13, symbol: 'AAPL', name: 'Not Apple', category: 'Fruit' },
];
console.log(stocks.filter(xx => xx.category === 'Tech'));

Using Typescript and Angular to efficiently filter an array of objects

Answer №1

Similar questions

Issue encountered while trying to execute Reapp project demo

Creating secure routes with React Router

Caching HTML5 videos in Google Chrome

altering the directory for bower installations on specific repositories exclusively

Looping through a JSON array and encoding it using the `

Using Javascript to organize information into a table with multiple columns

Testing the creation of a new document ID using mocks in a cloud function unit

The React axios request triggers the UseEffect cleanup function to terminate all subscriptions and asynchronous tasks

Discovering the value of a key within a JSON object by utilizing a String with JQuery

What is the reason behind router.base not functioning properly for static sources while running 'npm run build' in Nuxt.js?

The content could not be created due to an inability to lazily initialize a collection of roles. The proxy could not be initialized as there was no

Prevent the event listener from continuously triggering

Handling typeError in Vue.js JavaScript filter for object manipulation

How to declare multiple components in @ngModule using Angular 2

Upon submission in Vue, the data variable becomes undefined

Can you specify separate paths in your NPM package for use in the browser versus the server (NodeJS)?

Is locking Node and npm versions necessary for frontend framework projects?

What is the process for creating an Account SAS token for Azure Storage?

Babel exclusively processes JavaScript files in my Vue project, rather than the project as a whole

"Struggling with a basic Javascript function to refresh parts of a web page by calling a .php