Angular 4 Operator for adding elements to the front of an array and returning the updated array

Question

Angular 4 Operator for adding elements to the front of an array and returning the updated array

I am searching for a solution in TypeScript that adds an element to the beginning of an array and returns the updated array. I am working with Angular and Redux, trying to write a reducer function that requires this specific functionality. Using unshift doesn't return the array, and even using splice(0, 0, newObject) is not successful. Can anyone suggest another approach? The concat method does work but adds the element to the end of the array.

function Addrow(state: State, action: any): State {
 return Object.assign({}, state,{
     displayCodes: { list: copyobject.list.concat(state.displayCodes.list.length)},
     filteredCodes: { list: copyobject.list.concat(state.displayCodes.list.length)}
 });

javascript arrays angular typescript

Answer 1

Answer №1

There isn't a straightforward way to add an element to the beginning of an array and return the modified array.

You could try using splice method for adding an item at the start:

function AddAtBeginning(state: State, action: any): State {
  const length = state.displayCodes.list.length;
  const list = copyobject.list.splice(0, 0, length);

  return Object.assign({}, state, {
    displayCodes: { list },
    filteredCodes: { list }
  });
}

Alternatively, you can use unshift, even though it's not as concise:

function AddAtBeginning(state: State, action: any): State {
  const length = state.displayCodes.list.length;
  const list = copyobject.list; 
  list.unshift(length);

  return Object.assign({}, state, {
    displayCodes: { list },
    filteredCodes: { list }
  });
}

Answer 2

There isn't a straightforward way to add an element to the beginning of an array and return the modified array.

You could try using splice method for adding an item at the start:

function AddAtBeginning(state: State, action: any): State {
  const length = state.displayCodes.list.length;
  const list = copyobject.list.splice(0, 0, length);

  return Object.assign({}, state, {
    displayCodes: { list },
    filteredCodes: { list }
  });
}

Alternatively, you can use unshift, even though it's not as concise:

function AddAtBeginning(state: State, action: any): State {
  const length = state.displayCodes.list.length;
  const list = copyobject.list; 
  list.unshift(length);

  return Object.assign({}, state, {
    displayCodes: { list },
    filteredCodes: { list }
  });
}

Angular 4 Operator for adding elements to the front of an array and returning the updated array

Answer №1

Similar questions

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

What could be the reason for the electron defaultPath failing to open the specified directory?

JavaScript: AWS Amplify: Retrieving the User ID (Sub ID) Following User Registration. Post Registration, Not to Be Confused with Sign In

javascript execute while load

Serverless Functions in ZEIT Now - Customizing Routes with Parameters

Firestore Query sends data object to browser

Guide on spinning a particle in three.js

What is the best way to create a jQuery object that encapsulates a snapshot of a DOM element?

Insert HTML content into an iframe with a callback function

The MEAN stack consistently shows an error message of 'Invalid password' whenever a user attempts to log in

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

What approach can be taken to establish a dependency between an AngularJS controller and a value that is retrieved through ajax and loaded onto the root

Error Encountered While Building AWS Amplify with Ionic 5 and Angular 10

Having trouble setting up a new Angular project using NodeJS?

Challenges Experienced by AoT in Live Operations

The error message "printer.node is not a valid Win32 application" indicates that the

There is a lint error that is thrown when upgrading the typings file for JQuery version 3.2

Is it possible to replace a server-side templating engine with Angular 2's server-side pre-rendering?

Creating a function in a JavaScript module that can be exported to the window namespace

Implementing Angular - Injecting a component dynamically into another component