Home > database >  Push or Splice onto array of objects at a certain index typescript / angular 9?
Push or Splice onto array of objects at a certain index typescript / angular 9?

Time:10-21

I have an array of objects on an array called 'houseList = []' - the data is shown below:

  0: {houseCode: '1234', street: 'Grove Street'}
  1: {houseCode: '5678', street: 'Pike Street'}
  2: {houseCode: '9010', street: 'Park Street'}

I am trying to iterate over that data and add to an object a specific index - I want to add the following property to object #1, so that the data on the array of objects would look like this:

  0: {houseCode: '1234', street: 'Grove Street'}
  1: {houseCode: '5678', street: 'Pike Street', parking: 'True'}
  2: {houseCode: '9010', street: 'Park Street'}

So far, I've tried to push on to the array of objects, but no success. My function for doing so is below. I get an error of "ERROR TypeError: this.houseList[i].push is not a function.

for(let i = 0; i < this.houseList.length; i  ) {
   if (i === 1) {
       this.houseList[i].push({parking: this.ParkingIsTrue})
}
}

I have also tried splicing, but that just creates a new object on the array. Here is my code for the splicing function:

for(let i = 0; i < this.houseList.length; i  ) {
   if (i === 1) {
       this.houseList.splice(i, 0, this.ParkingIsTrue))
}
}

The result of the splicing is:

  0: {houseCode: '1234', street: 'Grove Street'}
  1: {houseCode: '5678', street: 'Pike Street'}
  2: {'True'}
  3: {houseCode: '9010', street: 'Park Street'}

My question is, how do I actually go about coding the desired data addition?

CodePudding user response:

What you want to do doesn't involve editing an array, only editing the property of that array. Array.prototype.push and Array.prototype.splice are used for adding and removing elements to and from an array, and aren't what you want to use here. Instead, you just want to set the property on the object at the first index of your array, which you can do like this:

this.houseList[1].parking = this.ParkingIsTrue;

Of course, you might need to tweak that slightly depending on how you need to determine which element in the array needs to be edited, and what its value needs to be. But I hope that example is at least a useful guide to the syntax that you will need to use.


The reason why you were getting the error "ERROR TypeError: this.houseList[i].push is not a function" is that this.houseList[i] resolves to an object like {houseCode: '5678', street: 'Pike Street'}. This value is not an array, and doesn't have a push method, so this.houseList[i].push resolves to undefined.

When you then tried to call that like a function, you get an error complaining that it's not a function because, well, it wasn't a function. It was undefined.

CodePudding user response:

Besides @Hanna's answer, you can also work with append parking property to object as below:

this.houseList.splice(i, 0, {
  ...this.houseList[i],
  parking: this.ParkingIsTrue,
});

Sample Solution on StackBlitz


References

JavaScript Ellipsis: Three dots ( … ) in JavaScript

  • Related