Repetitive cycling through an array

Question

Repetitive cycling through an array

My array consists of classes:

const transferClasses = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    children: [],
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    children: [
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
        name: "Class2-1",
        isTransfer: false,
        children: [],
      },
      {
        id: "89134f56-3ef6-ed11-8daf-85953743f4cc",
        name: "Class2-2",
        isTransfer: false,
        children: [
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f4de",
            name: "Class2-2-1",
            isTransfer: false,
            children: [],
          },
          {
            id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
            name: "Class2-2-2",
            isTransfer: false,
            children: [],
          },
        ],
      },
    ],
  },
];

I am looking to convert this nested array into a flat list. For example:

const flatList = [
  {
    id: "c5d91430-aaab-ed11-8daf-85953743f5cc",
    name: "Class1",
    isTransfer: false,
    childrenId: null,
    parentId: null,
  },
  {
    id: "775cb75d-aaab-ed11-8daf-85953743f5cc",
    name: "Class2",
    isTransfer: false,
    childrenId: [
      "89134f56-3ef6-ed11-8daf-85953743f5cc",
      "89134f56-3ef6-ed11-8daf-85953743f4cc",
    ],
    parentId: null,
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
    name: "Class2-1",
    isTransfer: false,
    childrenId: [],
    parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f5cc",
    name: "Class2-2",
    isTransfer: false,
    childrenId: [
      "89134f56-3ef6-ed11-8daf-85953743f4de",
      "89134f56-3ef6-ed11-8daf-85953743f1ce",
    ],
    parentId: ["775cb75d-aaab-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f4de",
    name: "Class2-2-1",
    isTransfer: false,
    childrenId: [],
    parentId: ["89134f56-3ef6-ed11-8daf-85953743f5cc"],
  },
  {
    id: "89134f56-3ef6-ed11-8daf-85953743f1ce",
    name: "Class2-2-2",
    isTransfer: false,
    childrenId: [],
    parentId: ["89134f56-3ef6-ed11-8daf-85953743f5cc"],
  },
];

Each element should have the ids of its parents and children listed.

Below is my function code. While I've handled the children, I'm stuck on how to include the parents.

export const getFlatList = (classes) => {
  return classes.map((cl) => {
    
    const getChildIds = (classes) => {
      return classes.map((cl) => {
        if (cl.children.length > 0) {
          getChildIds(cl.children);
        } else {
          return cl.id;
        }
        return cl.id;
      });
    };

    return {
      id: cl.id,
      name: cl.name,
      isTransfer: cl.isTransfer,
      children: getChildIds(cl.children),
      parentId: ?? // :(
    };
  });
};

javascript arrays typescript recursion tail-recursion

Answer 1

Answer №1

I devised a method similar to this. We begin our search from the top and then proceed to explore any children nodes. If there are children present, we delve one level deeper until we reach the end of the children array.

const flattenNestedArray = (nestedArray) => {
    let flatArray = [];

    const traverseNodes = (node, parentNodeId = null) => {
        const { children, ...otherProperties } = node;

        flatArray.push({
            ...otherProperties,
            childrenIds: children ? children.map(child => child.id) : [],
            parentIds: [parentNodeId],
        });

        if (node.children.length) {
            node.children.forEach((childNode) => traverseNodes(childNode, node.id));
        }
    }

    nestedArray.forEach((arrayItem) => traverseNodes(arrayItem));

    return flatArray;
}

jsfdl: https://jsfiddle.net/wlecki/34cL8jh1/

Answer 2

I devised a method similar to this. We begin our search from the top and then proceed to explore any children nodes. If there are children present, we delve one level deeper until we reach the end of the children array.

const flattenNestedArray = (nestedArray) => {
    let flatArray = [];

    const traverseNodes = (node, parentNodeId = null) => {
        const { children, ...otherProperties } = node;

        flatArray.push({
            ...otherProperties,
            childrenIds: children ? children.map(child => child.id) : [],
            parentIds: [parentNodeId],
        });

        if (node.children.length) {
            node.children.forEach((childNode) => traverseNodes(childNode, node.id));
        }
    }

    nestedArray.forEach((arrayItem) => traverseNodes(arrayItem));

    return flatArray;
}

jsfdl: https://jsfiddle.net/wlecki/34cL8jh1/

Answer 3

Answer №2

One way to streamline the process is by implementing a function called getFlatList(). This function can be designed to flatten the input data using a recursive strategy, where it iterates through each element in the input and adds it to an array as a result.

It's essential to include both the parentId and childrenId for every new object that is created in the output

function getFlatList ( input, parentId = null) {
    let result = [];
    for(let key in input) {
        if (input[key] && typeof(input[key]) === 'object') {
          if (input[key].name) {
              const { children, ...object } = input[key]
              result.push({
                  ...object,
                  childrenId: children.map(child => child.id),
                  parentId
              })
          }
          result.push(...getFlatList(input[key], input.id))
        }
    }
    return result;
}

const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", name: "Class2", isTransfer: false, children: [ { id: "89134f56-3ef6-ed11-8daf-85953743f5cc", name: "Class2-1", isTransfer: false, children: [], }, { id: "89134f56-3ef6-ed11-8daf-85953743f4cc", name: "Class2-2", isTransfer: false, children: [ { id: "89134f56-3ef6-ed11-8daf-85953743f4de", name: "Class2-2-1", isTransfer: false, children: [], }, { id: "89134f56-3ef6-ed11-8daf-85953743f1ce", name: "Class2-2-2", isTransfer: false, children: [], }, ], }, ], }, ];

console.log('Flattened: ');
console.log(getFlatList (transferClasses))

.as-console-wrapper { max-height: 100% !important; }

Answer 4

One way to streamline the process is by implementing a function called getFlatList(). This function can be designed to flatten the input data using a recursive strategy, where it iterates through each element in the input and adds it to an array as a result.

It's essential to include both the parentId and childrenId for every new object that is created in the output

function getFlatList ( input, parentId = null) {
    let result = [];
    for(let key in input) {
        if (input[key] && typeof(input[key]) === 'object') {
          if (input[key].name) {
              const { children, ...object } = input[key]
              result.push({
                  ...object,
                  childrenId: children.map(child => child.id),
                  parentId
              })
          }
          result.push(...getFlatList(input[key], input.id))
        }
    }
    return result;
}

const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", name: "Class2", isTransfer: false, children: [ { id: "89134f56-3ef6-ed11-8daf-85953743f5cc", name: "Class2-1", isTransfer: false, children: [], }, { id: "89134f56-3ef6-ed11-8daf-85953743f4cc", name: "Class2-2", isTransfer: false, children: [ { id: "89134f56-3ef6-ed11-8daf-85953743f4de", name: "Class2-2-1", isTransfer: false, children: [], }, { id: "89134f56-3ef6-ed11-8daf-85953743f1ce", name: "Class2-2-2", isTransfer: false, children: [], }, ], }, ], }, ];

console.log('Flattened: ');
console.log(getFlatList (transferClasses))

.as-console-wrapper { max-height: 100% !important; }

Answer 5

Answer №3

My approach to this would be as follows:

const group = (items, parentID = null) => 
  items.flatMap(({children = [], id, ...rest}) => [
    {id, ...rest, parentID, childrenIDs: children.map(({id}) => id)}, 
    ...group(children, id)
  ])

const classes = [{id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: []}, {id: "775cb75d-aaab-ed11-8daf-85953743f5cc", name: "Class2", isTransfer: false, children: [{id: "89134f56-3ef6-ed11-8daf-85953743f5cc", name: "Class2-1", isTransfer: false, children: []}, {id: "89134f56-3ef6-ed11-8daf-85953743f4cc", name: "Class2-2", isTransfer: false, children: [{id: "89134f56-3ef6-ed11-8daf-85953743f4de", name: "Class2-2-1", isTransfer: false, children: []}, {id: "89134f56-3ef6-ed11-8daf-85953743f1ce", name: "Class2-...
console.log(group(classes))

.as-console-wrapper {max-height: 100% !important; top: 0}

We use flatMap to flatten the list, at each step returning an array with the current item (excluding its children property), and then recursively processing the list of children. The parentID value is passed through the recursion, defaulting to null if not provided, and we extract childrenIDs by selecting the id values from the children objects. Recursion elegantly takes care of everything else for us.

Answer 6

My approach to this would be as follows:

const group = (items, parentID = null) => 
  items.flatMap(({children = [], id, ...rest}) => [
    {id, ...rest, parentID, childrenIDs: children.map(({id}) => id)}, 
    ...group(children, id)
  ])

const classes = [{id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: []}, {id: "775cb75d-aaab-ed11-8daf-85953743f5cc", name: "Class2", isTransfer: false, children: [{id: "89134f56-3ef6-ed11-8daf-85953743f5cc", name: "Class2-1", isTransfer: false, children: []}, {id: "89134f56-3ef6-ed11-8daf-85953743f4cc", name: "Class2-2", isTransfer: false, children: [{id: "89134f56-3ef6-ed11-8daf-85953743f4de", name: "Class2-2-1", isTransfer: false, children: []}, {id: "89134f56-3ef6-ed11-8daf-85953743f1ce", name: "Class2-...
console.log(group(classes))

.as-console-wrapper {max-height: 100% !important; top: 0}

We use flatMap to flatten the list, at each step returning an array with the current item (excluding its children property), and then recursively processing the list of children. The parentID value is passed through the recursion, defaulting to null if not provided, and we extract childrenIDs by selecting the id values from the children objects. Recursion elegantly takes care of everything else for us.

Repetitive cycling through an array

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript - changing object into a string (not functioning properly)

Utilizing namespacing in a JavaScript library can enhance organization and flexibility, providing

Loading files using $scriptjs or any other asynchronous loader allows for seamless integration of external resources

Describing a property of an interface as the determined form of a conditional type that is generic

Using a URL in an AJAX request

Is it possible to transform a webpack configuration into a Next.js configuration?

How to Nest Interfaces in TypeScript

Guide on integrating google play services into a nativescript plugin seed?

``To increase a value within an array object in MongoDB with the use of nodejs, what steps should be

Sending Node.js FileStream Image to HTML5 FileReader API

Using React - What is the best way to invoke a function from within a different function?

Webpack encounters an error while attempting to load Bootstrap v4.0.0-beta

How can we store image file paths in MongoDB?

Pattern matching for validating multiple email addresses

Receive live feedback from shell_exec command as it runs

Creating a "Container" component in Vue.js step by step

Identification of input change on any input or select field within the current modal using JavaScript

Three.js fails to load due to Require.js issue

React is unable to access and retrieve data from a web API

What is the process of declaring a react-icons icon in TypeScript?