What is the best way to flatten a nested array containing various objects, while extracting values based on the existing property names?

Question

What is the best way to flatten a nested array containing various objects, while extracting values based on the existing property names?

I am seeking a way to flatten a nested array containing different objects and retrieve only the existing values from specific property names within those objects.

Specifically, I am interested in extracting all the propertyId values from a nested array consisting of two distinct object types.

export interface LeftMenuItem {
    text: string;
    routerUrl?: string;
    isExpanded: boolean;  
    propertyId?: string;
    children: LeftMenuChildrenItem[];
}
export interface LeftMenuChildrenItem {
    text: string;
    routerUrl?. string;
    propertyId?: string;
    isCustomer: boolean
}

const leftMenuPropertyIds: string[] = [];

this.leftMenuItems.forEach(val1 => {
    if (val1.propertyId) {
        leftMenuPropertyIds.push(val1.propertyId);
    }
    if (val1.children.length > 0) {
        val1.children.forEach(val2 => {
            if (val2.propertyId) {
                leftMenuPropertyIds.push(val2.propertyId);
            }
        });
    }
});

console.log(leftMenuPropertyIds);

javascript arrays typescript

Answer 1

Answer №1

Use the reduce method to flatten both an array and an object, effectively removing unnecessary nodes.

const items = [
  {
    id: "1",
    name: "Sample item 1",
    children: [
      { id: "2", name: "Child item 1", children: [] },
      { id: "", name: "Child item 2", children: [] },
      { id: "3", name: "Child item 3", children: [] }
    ]
  }
];

const flatten = (node, result) => {
  if (node.id) result.push(node.id);
  (node.children || []).forEach(child => flatten(child, result));
  return result;
};
const flattenedList = items.reduce((resultArray, currentItem) => flatten(currentItem, resultArray), []);

console.log(flattenedList);

Answer 2

Use the reduce method to flatten both an array and an object, effectively removing unnecessary nodes.

const items = [
  {
    id: "1",
    name: "Sample item 1",
    children: [
      { id: "2", name: "Child item 1", children: [] },
      { id: "", name: "Child item 2", children: [] },
      { id: "3", name: "Child item 3", children: [] }
    ]
  }
];

const flatten = (node, result) => {
  if (node.id) result.push(node.id);
  (node.children || []).forEach(child => flatten(child, result));
  return result;
};
const flattenedList = items.reduce((resultArray, currentItem) => flatten(currentItem, resultArray), []);

console.log(flattenedList);

Answer 3

Answer №2

To address compatibility concerns, you have the option to utilize methods such as filter(), map(), and flatMap() on an array. Afterwards, employ ... to spread out the outcomes into a unified array.

function getLeftMenuPropertyIds(): string[] {
  const leftMenuIds = this.leftMenuItems
    .filter(leftMenuItem => leftMenuItem.propertyId !== undefined)
    .map(letMenuItem => letMenuItem.propertyId);

  const leftMenuChildrenIds = this.leftMenuItems
    .flatMap(leftMenuItem => leftMenuItem.children)
    .filter(child => child.propertyId !== undefined)
    .map(child => child.propertyId);

  return [...leftMenuChildrenIds, ...leftMenuIds]
}

Answer 4

To address compatibility concerns, you have the option to utilize methods such as filter(), map(), and flatMap() on an array. Afterwards, employ ... to spread out the outcomes into a unified array.

function getLeftMenuPropertyIds(): string[] {
  const leftMenuIds = this.leftMenuItems
    .filter(leftMenuItem => leftMenuItem.propertyId !== undefined)
    .map(letMenuItem => letMenuItem.propertyId);

  const leftMenuChildrenIds = this.leftMenuItems
    .flatMap(leftMenuItem => leftMenuItem.children)
    .filter(child => child.propertyId !== undefined)
    .map(child => child.propertyId);

  return [...leftMenuChildrenIds, ...leftMenuIds]
}

What is the best way to flatten a nested array containing various objects, while extracting values based on the existing property names?

Answer №1

Answer №2

Similar questions

Error in Django & Angular 2: {_dataService is not defined}

Angular - Ensuring service completion before proceeding with navigation

Using JavaScript to organize and categorize data within an array

Is it possible to render a Numpy array immutable?

Can anyone provide examples of how RegisterClientScriptBlock parameters are used in practical situations?

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

Unable to retrieve the current status of Li from the backend code

Retrieve PDF from Controller using jQuery AJAX request

Issue with AngularJs NgRoute

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Initiating the "cellValueChanged" event within the bespoke renderer component of Angular AG Grid when the selection is changed

Include a class in the declaration file (*d.ts)

Efficient ways to manage dropdown cells in ReactGrid

Best Practices for TypeScript and React: How to Handle Component State for Mounted Components

Troubleshooting NodeJS with Socket.IO 1.0: Identifying Memory Leaks Beyond the Heap

Properly implementing prototypal inheritance: best practices

When trying to upload numerous files, only a single file ends up being

JavaScript effectively divides multiple child dropdowns with the main dropdown, thanks to Bootstrap innovation

Having trouble setting $scope after redirecting to a partial template via routing

no output upon completion of a class constructor - JavaScript