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

Angular neglects the specified animation timing

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Is TypeScript necessary, or can I simply stick with ES6?

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

The Ionic Keyboard close event does not trigger

Definitions for nested directories within a main index.d.ts

Typescript input event

React modal not closing when clicking outside the modal in Bootstrap

Angular `CORS` Ailment

When using the ionic 3 storage.get function, it may return a null value when accessed outside

The identifier 'id' is not recognized within the 'never' type in Angular

Tips for implementing type safety in a generic class to verify that the response type aligns with the anticipated type in TypeScript

Find the combined key names in an object where the values can be accessed by index

Error in Angular ESLint: The key parameter is mandatory

Add CSS properties to child elements that are not of a specific selector, while styling their descendants without any restrictions

The result should display the top 5 application names based on the count property found within the ImageDetails object

Error in Angular Services due to Circular Dependency

Issue with Angular data display in template

The correct way to implement the bootstrap carousel with Angular

Best practice for integrating Typescript into an established ASP.NET 4 Webforms project