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

Exploring CountUp functionality with Vue framework

Node.js and Express causing Openshift to enter a crash loop back-off situation

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

expanding the input and duplicating the outcomes

Can you explain the significance of npm WARN excluding symbolic link?

Retrieve the child nodes from the array and organize them into a

What is preventing Angular from letting me pass a parameter to a function in a provider's useFactory method?

What is the best way to pass a specific property from a parent component to a child component in Angular when a button is clicked?

What does an exclamation mark signify in Angular / Type Script?

I am facing errors while running npm run build in my Vue CLI project, however, npm run dev is running smoothly without

"Using Nightwatch.js to Trigger a Click Event on a Text Link

The html-docx-js package generates incomprehensible text

Tips for converting an object into parameters for ng-include

Should the index.js file in Next.js serve as the homepage or solely as the initial starting point?

Navigating Angular modules - a different perspective

Having trouble displaying Ad-Gallery Loader.gif?

Nodejs: The JSON.stringify method is automatically rounding the numbers

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

Is the tab not displaying correctly when using Bootstrap 5 button functionality?

Using global variables for mocha testing (and babel setup)