Assign a specific value to each object

Question

Assign a specific value to each object

Receiving data from the backend in a straightforward manner:

this.archiveService.getRooms(team).subscribe(
  res => {
   this.form = res;
    this.form.forEach(el => {
     el.reservation.slice(-6).match(/.{1,2}/g).join('/');
    });

  },
  error => {
    console.log(error);
  }
)

this.form represents an object where I extract reservation numbers and remove unnecessary parts using regular expressions. After preparing the value, it is assigned back to this.form for displaying with *ngFor in a table.

The challenge lies in assigning each value from the forEach loop back into this.form.

javascript angular typescript

Answer 1

Answer №1

After consulting the documentation, it is evident that the JavaScript slice method does not alter the original array.

Instead, it returns a new array with the extracted elements.

To address this issue, you have two options: either utilize the splice method, which functions as described below:

The splice() method alters an array by removing or replacing existing elements and/or adding new elements. If you wish to extract part of an array without modifying it, consider using slice().

this.form.forEach(el => {
     el.reservation.splice(-6).match(/.{1,2}/g).join('/');
    });

Alternatively, you can reassign the value using the slice method like so:

this.form.forEach(el => {
     el.reservation = el.reservation.slice(-6).match(/.{1,2}/g).join('/');
    });

Illustrative Example

const myArr = [1,2,3,4,5,6,7,8,9,10]

const returnVal = myArr.slice(0,5)

console.log(`Value returned by slice : ${returnVal}`)
console.log(`Current array : ${myArr}`)

console.log('------------------')

const myArr2 = [1,2,3,4,5,6,7,8,9,10]

const returnVal2 = myArr2.splice(0,5)

console.log(`Value returned by splice : ${returnVal2}`)
console.log(`Current array : ${myArr2}`)

Answer 2

After consulting the documentation, it is evident that the JavaScript slice method does not alter the original array.

Instead, it returns a new array with the extracted elements.

To address this issue, you have two options: either utilize the splice method, which functions as described below:

The splice() method alters an array by removing or replacing existing elements and/or adding new elements. If you wish to extract part of an array without modifying it, consider using slice().

this.form.forEach(el => {
     el.reservation.splice(-6).match(/.{1,2}/g).join('/');
    });

Alternatively, you can reassign the value using the slice method like so:

this.form.forEach(el => {
     el.reservation = el.reservation.slice(-6).match(/.{1,2}/g).join('/');
    });

Illustrative Example

const myArr = [1,2,3,4,5,6,7,8,9,10]

const returnVal = myArr.slice(0,5)

console.log(`Value returned by slice : ${returnVal}`)
console.log(`Current array : ${myArr}`)

console.log('------------------')

const myArr2 = [1,2,3,4,5,6,7,8,9,10]

const returnVal2 = myArr2.splice(0,5)

console.log(`Value returned by splice : ${returnVal2}`)
console.log(`Current array : ${myArr2}`)

Answer 3

Answer №2

The main purpose of using the .forEach() method may not always meet your expectations.

If you find yourself stuck in a mundane routine and looking to explore more advanced options, consider exploring Array.prototype.forEach() for more flexibility.

Answer 4

The main purpose of using the .forEach() method may not always meet your expectations.

If you find yourself stuck in a mundane routine and looking to explore more advanced options, consider exploring Array.prototype.forEach() for more flexibility.

Assign a specific value to each object

Answer №1

Illustrative Example

Answer №2

Similar questions

Failed to load module chunk: Please update to angular 7

What's the Best Way to Add a Custom Flag to the `nx angular serve` Command Without Triggering an Error?

After submitting the form, Axios sends multiple requests simultaneously

The argument type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be assigned to the parameter type 'HTMLElementEvent<HTMLButton>'

Encountered an error while using npm install --legacy-peer-deps: Debug Failure. SyntaxKind: Unknown went unhandled

Guide on positioning components to the right side of the NavigationDrawer in Vuetify with VueRouter

What are the steps to determine if a radio has been examined through programming?

The appropriate method for showcasing cards within lists, such as in the platform Trello

"Creating a new element caused the inline-block display to malfunction

What is the best way to open the index.html file in electron?

Get rid of the folder from the URL using an <a> tag

transform array elements into an object

Tips for accessing the value of a dynamically created textbox using JavaScript

Unable to modify the logo images in React

Incorporating <span> elements into a comma-separated list using Jquery on every other item

Moment.js generated an error due to an unhandled promise rejection warning

Add items to a fresh record using Mongoose and Express

What is the best way to determine if an object.property is defined in Angular 2?

Tips for iterating through an array of images and displaying them in a React component

Enhancing User Interfaces with JQuery UI Widgets and Dynamic AJAX Calls