What is the best approach to organize data from an observable based on a nested key?

Question

What is the best approach to organize data from an observable based on a nested key?

I'm currently developing a new application and struggling with grouping data. The data is being pulled from an observable, and I need to group objects by their status and push them into an array. I attempted to use the groupBy() method, but unfortunately, it did not produce the desired results.

Here is a snippet of what I have:

const data = [
  {
    id: 3424234,
    name: "asdfgasdgas",
    protocol: 235452345,
    status: {
      code: "AVAILABLE",
      displayName: "Available"
    }
  },
  {
    id: 543534,
    name: "regertjerg",
    protocol: 7745672345,
    status: {
      code: "AVAILABLE",
      displayName: "Available"
    }
  },
  {
    id: 96089678,
    name: "kluioliudas",
    protocol: 7878745,
    status: {
      code: "INITIALREVIEW", 
      displayName: "Initial review"
    }
  }
]

Now, this is how I envision the data grouped:

const result = [
  {
    code: "AVAILABLE",
    displayName: "Available",
    items: [
      {
        id: 3424234,
        name: "asdfgasdgas",
        protocol: 235452345
      },
      {
        id: 543534,
        name: "regertjerg",
        protocol: 7745672345
      }
    ]
  },
  {
    code: "INITIALREVIEW", 
    displayName: "Initial review",
    items: [
      {
        id: 96089678,
        name: "kluioliudas",
        protocol: 7878745
      }
    ]
  }
]

Your assistance in solving this challenge is greatly appreciated!

angular typescript observable

Answer 1

Answer №1

Utilizing the reduce() function can help achieve this outcome:

outcome = information.reduce(function (r, a) {
        r[a.condition.key] = r[a.condition.key] || [];
        r[a.condition.key].push(a);
        return r;
    }, Object.create(null));

This process involves categorizing by the status.code

Answer 2

Utilizing the reduce() function can help achieve this outcome:

outcome = information.reduce(function (r, a) {
        r[a.condition.key] = r[a.condition.key] || [];
        r[a.condition.key].push(a);
        return r;
    }, Object.create(null));

This process involves categorizing by the status.code

Answer 3

Answer №2

Here is a suggestion for you:

 

const data = [ { id: 3424234, name: "asdfgasdgas", protocol: 235452345, status: { code: "AVAILABLE", displayName: "Available" } }, { id: 543534, name: "regertjerg", protocol: 7745672345, status: { code: "AVAILABLE", displayName: "Available" } }, { id: 96089678, name: "kluioliudas", protocol: 7878745, status: { code: "INITIALREVIEW", displayName: "Initial review" } } ] 

const groupBy = (arr) => data.reduce((acc, ele)=>( (acc[ele.status.code] = acc[ele.status.code] || []).push(ele), acc),{})

const reformat = ([k, v]) => ({code: k, displayName: v[0].status.displayName, items: v.map(({id, name, protocol})=>({id, name, protocol}))})
  
// Use the groupBy function to categorize the data based on status code
const result  =  Object.entries(groupBy(data)).map(ele=> reformat(ele))

console.log(result);

Answer 4

Here is a suggestion for you:

 

const data = [ { id: 3424234, name: "asdfgasdgas", protocol: 235452345, status: { code: "AVAILABLE", displayName: "Available" } }, { id: 543534, name: "regertjerg", protocol: 7745672345, status: { code: "AVAILABLE", displayName: "Available" } }, { id: 96089678, name: "kluioliudas", protocol: 7878745, status: { code: "INITIALREVIEW", displayName: "Initial review" } } ] 

const groupBy = (arr) => data.reduce((acc, ele)=>( (acc[ele.status.code] = acc[ele.status.code] || []).push(ele), acc),{})

const reformat = ([k, v]) => ({code: k, displayName: v[0].status.displayName, items: v.map(({id, name, protocol})=>({id, name, protocol}))})
  
// Use the groupBy function to categorize the data based on status code
const result  =  Object.entries(groupBy(data)).map(ele=> reformat(ele))

console.log(result);

Answer 5

Answer №3

This could be a simple and clear solution.

let uniqueCodes = [];
let uniqueStatuses = [];
data.forEach(item => {
    if(!uniqueCodes.find(code => code === item.status.code)) {
        uniqueCodes.push(item.status.code);
        uniqueStatuses.push(item.status);
    }
})
let finalResult = uniqueStatuses.map((status:any) => {
    status.items = data.filter(element => element.status.code === status.code)
    return status;
})
console.log(finalResult)

Answer 6

This could be a simple and clear solution.

let uniqueCodes = [];
let uniqueStatuses = [];
data.forEach(item => {
    if(!uniqueCodes.find(code => code === item.status.code)) {
        uniqueCodes.push(item.status.code);
        uniqueStatuses.push(item.status);
    }
})
let finalResult = uniqueStatuses.map((status:any) => {
    status.items = data.filter(element => element.status.code === status.code)
    return status;
})
console.log(finalResult)

What is the best approach to organize data from an observable based on a nested key?

Answer №1

Answer №2

Answer №3

Similar questions

The call to 'setRequestHeader' on 'XMLHttpRequest' was unsuccessful due to the object's state not being OPENED

After I deploy my Next.js code to Vercel, including Google Analytics added by @next/third-parties, I am encountering an error that does not appear in development mode

Angular-cli is throwing an error stating it cannot locate the module '@ngtools/json-schema'

The issue of the list view button not responding to click events in Angular2 NativeScript

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Generating typescript definitions for Polymer 2.4 packages

Ways to incorporate conditional checks prior to running class methods

Authentication for file uploads in Angular 2 using Dropzone and passportjs

Creating a custom React hook in TypeScript to handle mouse events

Bespoke Socket.io NodeJS chamber

There seems to be an issue with the useReducer value not updating when logging it in a handleSubmit function

What is the method for reaching a service in a different feature module?

Creating a composite object in Angular 2 reactive forms: a step-by-step guide

Error: monaco has not been declared

Compilation issues in node-modules arise following the Vue package and i18next updates

Secure mustache templates for data validation

RxJS pipe operation ignoring observable

In the process of using SWRInfinite for React Infinite Scrolling, the initial call may be made

Tips for utilizing jest.mock following the removal of @types/jest (^jest@24)

"Encountered the error message 'ViewContainerRef provider not found' when working with an ng-packagr component