Is there a way to sift through an array in typescript or react native based on a specific key

I have been working with JSON data structures and I am looking to filter it in order to create separate arrays based on specific keys.

Current JSON Data:

data: {
      message: 'Customer Transaction',
      errorCode: null,
      data: [
        {
          fields: 'Expected number of transaction per quarter',
          attributeValue: '1 to 25',
          attributeValueCode:"7",
        },
        {
          fields: 'Expected number of transaction per quarter',
          attributeValue: '26 to 50',
          attributeValueCode:"8",
        },
        ...
      ],
    },

Desired JSON Structure After Processing:

{"metaData":{
    "Expected number of transaction per quarter": ['1 to 25','26 to 50', 'Greater than 50'],
    ...
  }
}
typescriptlodash

Answer №1

To achieve this, you can utilize the reduce method along with setting fields as the key and pushing attributeValue to the array.

data.data.reduce(
  (acc, { fields, attributeValue }) => {
    if (!acc.metaData[fields]) acc.metaData[fields] = []

    acc.metaData[fields].push(attributeValue)

    return acc
  },
  { metaData: {} },
)

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

Change the option in the dropdown menu from true/false to yes/no

Here is a snippet of code that I am working with: <div *ngSwitchCase="'Boolean'"> <select *ngIf="attribute.IsWritable" [(ngModel)]="animal[attribute.AttributeKey]"> <option (value)="animal[attribute.Attribut ...

angularhtmltypescript

Guide on navigating to a different page using a function with router link in Angular using TypeScript

Trying my hand at Angualar and Typescript for the first time. I am working on creating a login page where users can move to another page if their credentials are correct. To achieve this, I want to use a function that is triggered by clicking a button. How ...

angulartypescript

Issue encountered while running the 'yarn install' command in a React project: 'The system does not recognize the term 'yarn'

When attempting to run the 'yarn install' command in my React project, I'm running into a problem. Even though I have Yarn installed globally (npm install --global yarn), I keep getting an error when trying to use any Yarn command in the ter ...

reactjstypescriptnpmviteyarnpkg

Unable to Load website with In-App-Browser

Hello there, I'm a newcomer to Ionic and I'm hoping for some guidance. My goal is to convert my website into an app, and after doing some research, it seems that utilizing the in-app-browser is the most suitable approach. constructor(public navC ...

typescriptcordovaionic-frameworkinappbrowserprogressive-web-apps

Typescript types can inadvertently include unnecessary properties

It seems that when a class is used as a type, only keys of that class should be allowed. However, assigning [Symbol()], [String()], or [Number()] as property keys does not result in an error, allowing incorrect properties to be assigned. An even more curio ...

typescriptsymbolsmapped-typestypescript-class

Attempting to send numerous identifiers in an API request

I encountered a problem while working on a function in Angular that involves pulling data from an API. My goal is to enhance a current segment to accommodate multiple IDs, but I face difficulties when attempting to retrieve more than one ID for the API que ...

javascriptangulartypescriptapi

The transformation from className to class attribute does not occur for custom elements in JSX

I recently encountered an issue with one of my React components where the "className" attribute was being converted to "classname" in the resulting HTML, instead of the expected "class" attribute. The component had a custom element definition as follows: ...

reactjstypescriptjsxtsx

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

I'm still getting the hang of typescript, and I've come across a situation where a function inside a Class constructor is calling another function, but when trying to access this within sayHelloAgain(), it returns the window object instead. With ...

javascripttypescriptarguments

Absence of environment variables in getServerSideProps within Next.js 13 independent deployment

Currently, I'm facing an issue where the props of my pages are not being hydrated properly. This problem arises as I migrate from an older version of NextJS and is where I find myself stuck at the moment. While everything seems to be working fine in d ...

javascriptreactjsnode.jstypescriptnext.js

What is the best way to dynamically determine the base path for my templates in Angular 2?

Is it possible to dynamically define the base path of two versions of each template in order to use one or the other through configuration? How can I declare TEMPLATES_PATH so that it can be implemented as shown below: component.ts @Component({ temp ...

dependency-injectiontypescriptconstantsangular

In TypeScript Next.js 14 APP, object literals are limited to declaring existing properties

I encountered an error in my typescript next.js 14 APP. I need assistance resolving this issue, which states: Object literal may only specify known properties, and 'productPackages' does not exist in type '(Without<ProductCreateInput, Pr ...

reactjstypescriptnext.jsprisma

The function userRole consistently returns "user" regardless of the role being admin

I am facing an issue with the getTeamMembers() method while trying to identify which members are admins in a private team. Even though I am logged in as an admin, the userRole value always shows as "user". Can anyone assist me with this problem? import { ...

typescriptbotframeworkmicrosoft-teams

The interaction between Nextjs router and useEffect resulting in unintended re-rendering

I'm currently facing a challenge with Next.js's next/navigation router. In my component, I have a series of useEffects implemented. Strangely, when I call router.replace, one of the effects runs twice or even infinitely in some cases. As a result ...

reactjstypescriptnext.jsreact-hooks

Generate a new entry by analyzing components from a separate array in a single line

I have a list of essential items and I aim to generate a record based on the elements within that list. Each item in the required list will correspond to an empty array in the exist record. Essentially, I am looking to condense the following code into one ...

javascripttypescript

Failure of Gulp Dest() to Generate File Output

Struggling to make gulp.dest output correctly. I'm aiming to output to the root of an ASP.NET Core project that I'm repurposing for TypeScript development. Any guidance on how to achieve this would be greatly appreciated. Below is the current con ...

javascripttypescriptgulpvisual-studio-2017

How to extract a value from a BehaviorSubject within an Angular 6 guard

I have chosen this approach because I have another guard responsible for validating the user based on a token that was previously stored. This is how it was handled in previous versions of rxjs, but now with the latest version you can no longer use map on ...

javascriptangulartypescriptrxjsbehaviorsubject

How can nested json be sorted effectively based on two specific fields?

Example Data: [{ 'ID': objID(abc123), 'Department': 'IT', 'Employees': [ { 'ID': 3, 'StartDate': '24-12-2022T08:30', 'active': true }, { ...

javascriptangulartypescript

Exploring the implementation of Generic types within a function's body

When trying to encapsulate logic inside the OrderGuard component (which can handle two types of orders: CheckinOrder or Checkout order), I encounter an issue when passing the order to the orderLoad callback in TypeScript. The error message states that "Ch ...

reactjstypescripttypescript-genericstypescript3.0

Creating an enum from an associative array for restructuring conditions

Hey everyone, I have a situation where my current condition is working fine, but now I need to convert it into an enum. Unfortunately, the enum doesn't seem to work with my existing condition as mentioned by the team lead. Currently, my condition loo ...

javascriptreactjstypescript

Unconventional Approach to Controlling without Traditional Classes

Being a beginner in TypeScript, I've noticed numerous examples demonstrating the use of Angular with TypeScript, all of which involve controller classes. As I delve deeper into it, I realize that I need to mention the injected services multiple times ...

angularjstypescript