CODEWITHSUNDEEP
javascriptangulargoogle-cloud-firestore
Wahéb
Wahéb

Reputation: 771

why Im getting the same objects values

Im working on an Angular/firebase project

in this function :

Why Im getting an array with a duplicated array ? The expected result should be an array that contains 2 object, every object has its own values

Especially with dropNumber value, I’m getting the same vale (2) in both objects

createAutoObject() {
    this.drops.length = 0;

    let objectToInsert = {
      campaignName: '',
      dropStatus: '',
      isSeededReceived: false,
      isLastDrop: false,
      isDropCompleted: false,
      dropNumber: 0,
      dropVolume: '',
    };

    for (let i = 1; i <= 2; i++) {
      objectToInsert.campaignName = campaignObject.campaignName;
      objectToInsert.dropNumber = i;
      objectToInsert.dropVolume = campaignObject.firstDropVolume;
      this.drops.push(objectToInsert);
    }
    return this.drops;
  }

Upvotes: 1

Views: 43

Answers (1)

Reg Edit
Reg Edit

Reputation: 6916

The reason both elements of your array have the same dropNumber is that they are both pointing to the same object (objectToInsert).

After adding the first element to the array, your loop then sets dropNumber to a value one greater, ready to add the second element to the array. But objectToInsert is still the same object reference, which the first array element is pointing to.

To create a new object for each element you are inserting, you need to add this line before setting any object properties for that element:

objectToInsert = new Object();

Then, each element in your array will be a different object reference and the properties will have the values you expect.

There is information here about working with objects in JavaScript that may provide further help in this area.

EDIT: with the basic JavaScript issue explained, now let's think about how you could do it better in TypeScript with a class.

Currently you instantiate objectToInsert as an anonymous type, like this:

let objectToInsert = {
  campaignName: '',
  .
  .
  .

Anonymous types are very powerful and flexible, but even though they can be strongly typed, their anonymity means that (by definition) they have no type name you can use to instantiate individual objects of that type.

Named types, or traditional classes, do not have this shortcoming and you can use this here to your advantage.

Giving the type a name, such as Campaign:

class Campaign {
  campaignName: string = '';
  isSeededReceived: boolean = false;
  dropNumber:number = 0;
  dropVolume:number = 0;
  firstDropVolume:number = 0;
}

allows you to refer to the type by name when instantiating objects:

for (let i = 1; i <= 2; i++) {
  let objectToInsert = new Campaign();

  objectToInsert.campaignName = campaignObject.campaignName;
  objectToInsert.dropNumber = i;
  objectToInsert.dropVolume = campaignObject.firstDropVolume;
  this.drops.push(objectToInsert);
}

The member array this.drops, which you refer to but whose declaration isn't seen here, would obviously need similar treatment. That's to say, both the array and any other code using it would also need updating to think in terms of Campaign rather than Object. The details of that will depend on your design, but should be self-explanatory.

Apart from the self-documenting aspect of having a type name, the benefit this brings is that your code has greater type safety, since you are no longer obliged to use any to add objects to the array.

There's a TypeScript Playground which you may find useful for trying things out quickly online.

Upvotes: 1

Related Questions