Using Typescript to extract values from an array and apply them as filters on a Map

Question

Using Typescript to extract values from an array and apply them as filters on a Map

My code involves two maps: charamap and filterdata. The goal is to filter charamap so that it only displays data for items listed in filterdata. The expected result should be:

[LOG]: ["Football":1, "Golf":0]

However, the actual output is:

[LOG]: ["Football", "Golf"]

What could be causing this issue in my code?

const charamap = {
    "Football": 1,
    "Cricket": 3,
    "Golf": 0,
    "Swimming": 10,
};

const filterdata = {
"fields": [ "Football", "Golf"]
};

// flatten charamap
const aa = JSON.stringify(charamap);
const resultcharac = JSON.parse(aa);
const ss = Array.from(resultcharac);

//get fields in array
const bb = JSON.stringify(filterdata);
const resultfields = JSON.parse(bb);
const rr = resultfields.fields;


//filter based on the 2 arrays

const res = rr
  .reduce((obj: any, key: any) => ({ ...obj, [key]: ss[key] }), {});


console.log(res);

//Updated to use .reduce instead of .filter

typescript

Answer 1

Answer №1

Updated to include reduce.

If you prefer using the filter method, here is sample code:

const charamap = {
    "Football": 1,
    "Cricket": 3,
    "Golf": 0,
    "Swimming": 10
};

const filterdata = {
"fields": [ "Football", "Golf"]
};

const entries = Object.entries(charamap).filter(([key])=> 
  filterdata.fields.includes(key));

const result = Object.fromEntries(entries);
console.log(result);

Alternatively, if you prefer using reduce method (although it may be more complex and harder to maintain), here is a one-liner leveraging reduce:

const result = Object.entries(charamap)
   .reduce((reduced, [key, value]) => {
     if (filterdata.fields.includes(key)){
       reduced[key] = value;
     }
     return reduced;
   }, {});

console.log(result);

Answer 2

Updated to include reduce.

If you prefer using the filter method, here is sample code:

const charamap = {
    "Football": 1,
    "Cricket": 3,
    "Golf": 0,
    "Swimming": 10
};

const filterdata = {
"fields": [ "Football", "Golf"]
};

const entries = Object.entries(charamap).filter(([key])=> 
  filterdata.fields.includes(key));

const result = Object.fromEntries(entries);
console.log(result);

Alternatively, if you prefer using reduce method (although it may be more complex and harder to maintain), here is a one-liner leveraging reduce:

const result = Object.entries(charamap)
   .reduce((reduced, [key, value]) => {
     if (filterdata.fields.includes(key)){
       reduced[key] = value;
     }
     return reduced;
   }, {});

console.log(result);

Using Typescript to extract values from an array and apply them as filters on a Map

Answer №1

Similar questions

The 'state' property is not found on the 'FetchPeriod' type

Using Rxjs interval operator for Angular 2 HTTP calls at regular intervals

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

Prisma Remix is throwing a TypeError: "The function (0, import_prisma.createNote) is not defined as a function."

Angular does not support the functionality of having multiple material paginations within a single component

Using Angular with THREE JS integration in Javascript

Fix the problem of "@typescript-eslint/no-invalid-this" in class fields without causing issues with "@typescript-eslint/no-this-alias"

Jest snapshot tests are not passing due to consistent output caused by ANSI escape codes

What is the process for transforming every data type within an array?

An effective method to utilize .map and .reduce for object manipulation resulting in a newly modified map

Shattered raw emotion

Should front-end and back-end share Typescript data modeling through classes or interfaces?

Alerts in Angular templates of inherited class in WebStorm

Determining the return type by analyzing the parameter type

Encountering an ERROR of TypeError when attempting to access the property 'length'

Using regular expressions, replace all instances of " " with ' ' based on certain conditions

Is it possible to perform remote file upload using Selenium in TypeScript?

Tips for finding the displayRows paragraph within the MUI table pagination, nestled between the preceding and succeeding page buttons

When comparing TypeScript class functions with regular functions and variables, which one yields better performance?

Can a TypeScript interface be exported as the result of a function?