Utilizing the array.map method to access the key of an object within an array of arrays in TypeScript

Can I utilize array.map in TypeScript to apply a function with the parameter being the key of an object within an array? I have an array containing objects which have keys 'min' and 'max'. I am looking to use something like

someArrayFunction(array.map(func1(key), array.map()))
to compare the values of each key in the object array.

const allVariables: any[] =  [
  [ { name: 'a', value:{min: 1, max: 2}, expect: {min: 1, max: 2}}, { name: 'b', value: {min: 11, max: 22}, expect: {min:11, max: 22} }],
  [ { name: 'a1',value:{min: 1, max: 2}, expect: {min: 1, max: 2}}, {name: 'b1', value: {min: 11, max: 22}, expect: {min:11, max: 22} }],
  [ { name: 'a2',value:{min: 1, max: 2}, expect: {min: 1, max: 2}}, {name: 'b2', value: {min: 11, max: 22}, expect: {min:11, max: 22} }],
];

allVariables.forEach(obj => {
  Object.keys(obj).forEach((key) => {
    // someArrayFunction(someFunc(obj.name, key), obj.value[key])
    // comparing value.min === expect.min for name a
    // comparing value.min === expect.min for name b
    // comparing value.min === expect.min for name a1
    // comparing value.min === expect.min for name b1
    // comparing value.min === expect.min for name c1

  })
})

// someArrayFunction(parameter: string[], v: number){
  // do something with parameter and v...
// }

Answer №1

I'm not entirely sure if that's what you were looking for.

const allItems: any[] =  [
  [
    { name: 'x', value:{min: 3, max: 5}, expect: { min: 3, max: 5 } },
    { name: 'y', value: {min: 8, max: 11}, expect: { min:8, max: 11 } },
  ],
  [
    { name: 'x1',value:{min: 2, max: 4}, expect: { min: 2, max: 4 } },
    { name: 'y1', value: {min: 7, max: 12}, expect: { min:7, max: 12} },
  ],
  [
    { name: 'x2',value:{min: 6, max: 9}, expect: { min: 6, max: 9 } },
    { name: 'y2', value: {min: 10, max: 15}, expect: { min:10, max: 15 } },
  ],
];

allItems.forEach(group => {
  group.forEach(item => {
    const {value, expect} = item;

    console.log(anotherArrayFunction(item, value));
  })
})


function anotherArrayFunction(value, expect) {
  return value.min === expect.min;
}

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

Updating text inputs in Angular can be done more efficiently using Angular Update

I need to make adjustments to an Angular application so that it can run smoothly on older machines. Is there a more efficient method for updating a text input field without using (keyup) to update after each keystroke? I haven't been able to find any ...

Exploring Angular 4: Embracing the Power of Observables

I am currently working on a project that involves loading and selecting clients (not users, but more like customers). However, I have encountered an issue where I am unable to subscribe to the Observables being loaded in my component. Despite trying vario ...

Tips for displaying personalized data with MUI DatePicker

I need to create a React TypeScript component that displays a MUI DatePicker. When a new date is selected, I want a custom component (called <Badge>) to appear in the value field. Previously, I was able to achieve this with MUI Select: return ( ...

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have: async getBranchDetails() ----component method { let banks = this.bankDataService.getBanks(); let branchTypes = this.branchDataService.getBranchTypes(); forkJoin([banks,branchTypes]).subscribe(results => { ...

Do Typescript interfaces check method parameters for validation?

interface optionsParameter { url: string; } function DEC(options: optionsParameter){ } DEC(2) //typescript check compilation error let obj:any = { name: "Hello" } obj.DEC = function(options: optionsParameter){} obj.DEC(1); // no compilation ...

Utilize the provider within the decorator function

Essentially, the challenge I am facing is passing an authService to the "verifyClient" function within the @WebSocketGateway decorator. Here is how it should look: @WebSocketGateway({ transports: ['websocket'], verifyClient: (info: { req: Inc ...

"Encountering Issues with Angular's Modules and EntryComponents during Lazy Loading

Upon lazy loading an Angular module, I encountered an issue when trying to open my DatesModal that resulted in the following error: No component factory found for DatesModal. Have you included it in @NgModule.entryComponents? The declaration and entryCom ...

Resolve functionality in UI Router fails to function properly when utilizing component-based states

Issue: In a project I am currently involved in, there is a component that is utilized in two different scenarios. One instance involves calling it from the Material Design system's bottomSheet, while the other requires direct usage through the ui-ro ...

TypeScript is still throwing an error even after verifying with the hasOwnProperty

There exists a type similar to the following: export type PathType = | LivingstoneSouthernWhiteFacedOwl | ArakGroundhog | HubsCampaigns | HubsCampaignsItemID | HubsAlgos | HubsAlgosItemID | TartuGecko | HammerfestPonies | TrapaniSnowLeop ...

Maintain the specific type based on the provided data, rather than the default value, when a related generic is defined

When it comes to unit tests, I prefer a more flexible approach with dynamic generic types that eliminate the need for type casting. I want T to be open-ended, but if I specify a type, I expect to receive an exact match. For R, I need it to precisely matc ...

Capturing user audio on the client side with Angular

Is there a built-in feature in Angular to record client-side audio input? I have attempted using the p5 library, but it is encountering integration problems. ...

Activate the child for an update

Welcome! I am a newcomer to Angular and would greatly appreciate any assistance. The parent component of my picker has the ability to create various rules for each option. However, these rules are dynamic and can change frequently. I need to ensure that ...

Having trouble retrieving a specific object from an array using EJS

When re-rendering my form with any errors, I am able to display the errors in a list. However, I would like to access each error individually to display them under the invalid input instead of all at the bottom of the form. Here is what I have tried so f ...

Having trouble configuring Jest for TypeScript integration

I am currently implementing unit testing for a typescript project following the guidelines in this example: https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln In my project, I have a file named main.ts that exports an isInternalLink func ...

Observe the task while returning - Firebase Functions

I am working on a Firebase Cloud Functions project where I need to run a scraping task within one of the functions. While the scraping is in progress, I also need to provide progress updates to the consumer. For example, informing them when the task is at ...

Add a custom design to the Material UI menu feature

I am currently trying to implement a custom theme using the following code: import Menu from '@material-ui/core/Menu'; import { createStyles, withStyles, Theme } from '@material-ui/core/styles'; const myMenu = withStyles( ( theme: The ...

Divide an array into smaller chunks using array_chunk dynamically, depending on the elements in

Is there a way to split an array dynamically, similar to the function array_chunk, but instead of specifying the size as an integer for the second parameter, can we use an array like different_sizes to define the chunk sizes? $input_sub_arr = range( ...

Monitor changes in a dynamic child component using Angular fire and TypeScript only (no HTML)

Currently, I am developing a component using TypeScript and passing inputs to my child component from there. In the parent TypeScript file: this.childComponent = this.viewContainerRef.createComponent(this.data.body).instance; this.childComponent['chi ...

Distributing utility functions universally throughout the entire React application

Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...

Typescript error in RxJS: Incorrect argument type used

I came across this code snippet from an example in rxjs: Observable.fromEvent(this.getNativeElement(this.right), 'click') .map(event => 10) .startWith({x: 400, y: 400}) .scan((acc, curr) => Object.assign({}, acc, {x: acc ...