Creating a TypeScript function that adds or replaces an element in an array of objects

Question

Creating a TypeScript function that adds or replaces an element in an array of objects

I am looking to create a function that accepts an array of objects, one object, and a key as input. The goal is for the function to return an array of objects with the new object at position 0 if it is not already in the array, or in the same position if it is. The key provided will be used to compare the objects, and can only be either a string or a number.

I have already written a function for this purpose, but it is important to note that each object must have an "id" property included.

export function addOrReplaceById<T extends Array<{ id: string }>>(
  arrayOfObjects: T,
  newObject: { id: string }
): T {
  const index = arrayOfObjects.findIndex((object) => object.id === newObject.id);

  if (index === -1) {
    arrayOfObjects.unshift(newObject);
  } else {
    arrayOfObjects[index] = newObject;
  }

  return arrayOfObjects;
}

javascript arrays typescript object

Answer 1

Answer №1

If you want to create a function that adds or replaces an object in an array based on a specified key, you can follow this approach:

export function addOrReplaceObjectByKey<T extends {[property: string]: any}>(
    objectsArray: T[],
    newObject: T,
    keyToCheck: keyof T,
): T[] {
    const index = objectsArray.findIndex((obj) => obj[keyToCheck] === newObject[keyToCheck]);

    if (index === -1) {
        objectsArray.unshift(newObject);
    } else {
        objectsArray[index] = newObject;
    }
    return objectsArray;
};

Answer 2

If you want to create a function that adds or replaces an object in an array based on a specified key, you can follow this approach:

export function addOrReplaceObjectByKey<T extends {[property: string]: any}>(
    objectsArray: T[],
    newObject: T,
    keyToCheck: keyof T,
): T[] {
    const index = objectsArray.findIndex((obj) => obj[keyToCheck] === newObject[keyToCheck]);

    if (index === -1) {
        objectsArray.unshift(newObject);
    } else {
        objectsArray[index] = newObject;
    }
    return objectsArray;
};

Answer 3

Answer №2

Take a look at this scenario:

export function addOrReplaceById<
    Obj extends { id: string },
    Arr extends Array<Obj>
>(
    arrayOfObjects: [...Arr],
    newObject: Obj
) {
    const data = arrayOfObjects
        .reduce<{ exists: boolean, arr: Obj[] }>(
            (acc, obj) =>
                obj.id === newObject.id ? {
                    ...acc,
                    exists: true,
                    arr: [...acc.arr, newObject]
                } : acc, {
            exists: false,
            arr: []
        });

    return data.exists ? data.arr : [newObject, ...data.arr]
}

The example above simplifies the complexity by avoiding the expensive operation of unshift. Instead, I introduced a new data structure {exists: boolean, arr:Obj[]}.

In addition, I made sure to return a new array rather than mutating the existing one.

Answer 4

Take a look at this scenario:

export function addOrReplaceById<
    Obj extends { id: string },
    Arr extends Array<Obj>
>(
    arrayOfObjects: [...Arr],
    newObject: Obj
) {
    const data = arrayOfObjects
        .reduce<{ exists: boolean, arr: Obj[] }>(
            (acc, obj) =>
                obj.id === newObject.id ? {
                    ...acc,
                    exists: true,
                    arr: [...acc.arr, newObject]
                } : acc, {
            exists: false,
            arr: []
        });

    return data.exists ? data.arr : [newObject, ...data.arr]
}

The example above simplifies the complexity by avoiding the expensive operation of unshift. Instead, I introduced a new data structure {exists: boolean, arr:Obj[]}.

In addition, I made sure to return a new array rather than mutating the existing one.

Creating a TypeScript function that adds or replaces an element in an array of objects

Answer №1

Answer №2

Similar questions

Is there a way to transform a stringified array into an array in JavaScript if I do not have access to the original string?

Why isn't the pipe working when trying to extract the last 2 characters using

Tips for effectively showcasing JSON in an Angular directive

How can we transform words with double "OO" in a paragraph into green squares using React? For instance, changing "clooney" to "cl[green square]ey"

Is JavaScript Promise Chaining Allowed?

Angular 2: Enhancing the table with Bootstrap Modal behind the scenes

Troubleshooting [object Object] Error in Node.js using Express

Having trouble accessing the input class with jQuery

Generating Ionic components with HTML markup

What is the optimal method for creating direct duplicates of string variables in C#?

Will not pass over if the number is already in the array?

No content in webpack result file when using express and react

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

Don't forget to keep in mind the importance of the "Radio" value when you are submitting a form to yourself on

Trouble with 'this.function' and handling scope within my code

Exploring the intricacies of using jquery text() with HTML Entities

improper rendering of highcharts

Spinning a basic square two times

Error occurred while attempting to fetch the associated objects from the Parse.Query

Having trouble incorporating a react component I discovered into my application. Encountering an error message stating "Attempted import error."