Traversing an array of objects in TypeScript and appending to a separate array if not already present

Question

Traversing an array of objects in TypeScript and appending to a separate array if not already present

I have been given an array containing objects in the following format:

export interface Part {
  workOrder?: string;
  task?: string;
  partNumber?: string;
  qty?: number;
  image?: string;
  name?: string;
}

My goal is to loop through each object in the array and create a new array based on this interface:

export interface WorkOrder {
  workOrder?: string;
  tasks?: Array<string>;
}

This is what my code currently looks like:

let partList: Part[] = [ 
  { workOrder: "W1", task: "do something", ... },
  { workOrder: "W1", task: "something else", ... },
  { workOrder: "W2", task: "do something", ... },
  { workOrder: "W2", task: "something else", ... }
];

let workOrders: WorkOrder[] = [];

I aim to populate the workOrders array with the workOrder and task from each Part. If a workOrder has already been added, I want to append the additional task to the existing tasks array under that workOrder.

The final output should resemble this:

workOrders = [ 
  { workOrder: "W1", tasks: [ "do something", "something else" ] },
  { workOrder: "W2", tasks: [ "do something", "something else" ] }
];

Currently, I am using multiple for loops and checking the .indexOf() method for certain arrays, but I believe there must be a more efficient approach.

javascript arrays database typescript object

Answer 1

Answer №1

let workOrdersList = [];

partList.forEach(element => {
  if (!workOrdersList.find(order => order.workOrder === element.workOrder)) {
      workOrdersList.push({ workOrder: element.workOrder, tasks: [element.task] 
  });
  } else {
      workOrdersList.find(order => order.workOrder === 
      element.workOrder).tasks.push(element.task);
  }
})

Utilize the find method to check if an element is included in the list, if it's present then add the task to existing work order or create a new one.

Answer 2

let workOrdersList = [];

partList.forEach(element => {
  if (!workOrdersList.find(order => order.workOrder === element.workOrder)) {
      workOrdersList.push({ workOrder: element.workOrder, tasks: [element.task] 
  });
  } else {
      workOrdersList.find(order => order.workOrder === 
      element.workOrder).tasks.push(element.task);
  }
})

Utilize the find method to check if an element is included in the list, if it's present then add the task to existing work order or create a new one.

Answer 3

Answer №2

Utilize the reduce method.

Take a look at this code snippet

let dataList = [
  { ID: "001", description: "item one" },
  { ID: "002", description: "second item" },
  { ID: "003", description: "another item" },
  { ID: "004", description: "final item" }
];

let items = dataList.reduce((acc, curr) => {
  var currentItem = acc.find((element) => element.ID === curr.ID);
  if (currentItem)
    currentItem.details.push(curr.description);
  else
    acc.push({ ID: curr.ID, details: [curr.description]});
  
  return acc;
}, []);

console.log(items);

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

Additional Resources

Array.prototype.reduce()

Answer 4

Utilize the reduce method.

Take a look at this code snippet

let dataList = [
  { ID: "001", description: "item one" },
  { ID: "002", description: "second item" },
  { ID: "003", description: "another item" },
  { ID: "004", description: "final item" }
];

let items = dataList.reduce((acc, curr) => {
  var currentItem = acc.find((element) => element.ID === curr.ID);
  if (currentItem)
    currentItem.details.push(curr.description);
  else
    acc.push({ ID: curr.ID, details: [curr.description]});
  
  return acc;
}, []);

console.log(items);

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

Additional Resources

Array.prototype.reduce()

Answer 5

Answer №3

To aggregate data based on the workOrder, you can utilize the reduce method as shown below:

var result = partList
    .reduce<{ [name: string]: WorkOrder }>((map, r) => {
        let existing = map[r.workOrder];
        if (existing) {
            existing.tasks.push(r.task);
        } else {
            map[r.workOrder] = {
                tasks: [r.task],
                workOrder: r.workOrder
            };
        }
        return map;
    }, {});

var asArray = Object.values(result)

If data grouping is a common requirement, consider creating a reusable group function to simplify the process:

function group<T>(data: T[]) {
    return {
        byKey(keyGetter: (e: T) => string) {
            return {
                createGroup<TResult>(ctor: (e: T) => TResult) {
                    return {
                        addToGroup(adder: (e: T, c: TResult) => void) {
                            var result = data
                                .reduce<{ [name: string]: TResult }>((map, r) => {
                                    let key = keyGetter(r)
                                    let existing = map[key];
                                    if (existing) {
                                        adder(r, existing);
                                    } else {
                                        map[key] = ctor(r);
                                    }
                                    return map;
                                }, {});

                            return Object.values(result)
                        }
                    }
                }
            }
        }
    }
}
let finalResult = group(partList)
    .byKey(x => x.workOrder)
    .createGroup(x => <WorkOrder>{ tasks: [x.task], workOrder: x.workOrder })
    .addToGroup((e, c) => c.tasks.push(e.task));

Answer 6

To aggregate data based on the workOrder, you can utilize the reduce method as shown below:

var result = partList
    .reduce<{ [name: string]: WorkOrder }>((map, r) => {
        let existing = map[r.workOrder];
        if (existing) {
            existing.tasks.push(r.task);
        } else {
            map[r.workOrder] = {
                tasks: [r.task],
                workOrder: r.workOrder
            };
        }
        return map;
    }, {});

var asArray = Object.values(result)

If data grouping is a common requirement, consider creating a reusable group function to simplify the process:

function group<T>(data: T[]) {
    return {
        byKey(keyGetter: (e: T) => string) {
            return {
                createGroup<TResult>(ctor: (e: T) => TResult) {
                    return {
                        addToGroup(adder: (e: T, c: TResult) => void) {
                            var result = data
                                .reduce<{ [name: string]: TResult }>((map, r) => {
                                    let key = keyGetter(r)
                                    let existing = map[key];
                                    if (existing) {
                                        adder(r, existing);
                                    } else {
                                        map[key] = ctor(r);
                                    }
                                    return map;
                                }, {});

                            return Object.values(result)
                        }
                    }
                }
            }
        }
    }
}
let finalResult = group(partList)
    .byKey(x => x.workOrder)
    .createGroup(x => <WorkOrder>{ tasks: [x.task], workOrder: x.workOrder })
    .addToGroup((e, c) => c.tasks.push(e.task));

Traversing an array of objects in TypeScript and appending to a separate array if not already present

Answer №1

Answer №2

Take a look at this code snippet

Additional Resources

Answer №3

Similar questions

React DnD now enables dragging an entire list of cards instead of just a single card

Prevent certain dates from being selected in a designated input field

Exploring the Usage of sessionStorage within the <template> Tag in Vue.js

Uncover the issue with the examination: solving the enigma of the ancient wizards' sect

jQuery load() function triggers unexpected error in jQuery plugin

What is the best way to hear an event emitted by a component?

Promise not being properly returned by io.emit

Receiving an array of data from a SOAP service using PHP

Guide to redirecting to another page with parameters in React

What is the best way to connect these functions in a sequence using promises?

Sending Disabled Form Field Input Value in Angular 2 POST Request

The functionality of the Bootstrap 4 Carousel featuring multiple items is experiencing malfunctions

Automatically switch tabs upon pressing/scanning the Return key (using PHP, MySQL, and JavaScript)

I'm trying to find the location of the server.js file in Node

Having trouble implementing pagination for news-api in Vue.js2?

How can I combine multiple textures from mtlLoader and objLoader in three.js?

Encountered a Node.js build error related to a Java module

Is it possible to perform ECDH Key Exchange using public keys of varying lengths?

Failure to initiate JavaScript function with onClick event

Tips for creating a two-tier selection filter system