CODEWITHSUNDEEP
javascriptangulartypescriptobjectmerge
Maniraj Murugan
Maniraj Murugan

Reputation: 9084

Merge the object using typescript

In my angular application i am having the data as follows,

  forEachArrayOne = [
    { id: 1, name: "userOne" },
    { id: 2, name: "userTwo" },
    { id: 3, name: "userThree" }
  ]

  forEachArrayTwo = [
    { id: 1, name: "userFour" },
    { id: 2, name: "userFive" },
    { id: 3, name: "userSix" }
  ]

  newObj: any = {};

  ngOnInit() {
this.forEachArrayOne.forEach(element => {
  this.newObj = { titleOne: "objectOne", dataOne: this.forEachArrayOne };
})

this.forEachArrayTwo.forEach(element => {
  this.newObj = { titleTwo: "objectTwo", dataTwo: this.forEachArrayTwo };
})

console.log({ ...this.newObj, ...this.newObj });


  }

In my real application, the above is the structure so kindly help me to achieve the expected result in the same way..

The working demo https://stackblitz.com/edit/angular-gyched which has the above structure.

Here console.log(this.newObj) gives the last object,

   titleTwo: "ObjectTwo",
   dataTwo:
     [
       { id: 1, name: "userFour" },
      { id: 2, name: "userFive" },
      { id: 3, name: "userSix" }
     ]

but i want to combine both and need the result exactly like the below..

  {
  titleOne: "objectOne", 
  dataOne:
    [
      { id: 1, name: "userOne" },
      { id: 2, name: "userTwo" },
      { id: 3, name: "userThree" }
    ],
  titleTwo: "ObjectTwo",
  dataTwo:
    [
      { id: 1, name: "userFour" },
      { id: 2, name: "userFive" },
      { id: 3, name: "userSix" }
    ]
}

Kindly help me to achieve the above result.. If i am wrong in anywhere kindly correct with the working example please..

Upvotes: 0

Views: 158

Answers (1)

user184994
user184994

Reputation: 18281

You're assigning both values to this.newObj, so it just overwrites the first object.

Also, there is no need for your loop. It doesn't add anything.

Instead, you can do:

this.newObjA = { titleOne: "objectOne", dataOne: this.forEachArrayOne };
this.newObjB = { titleTwo: "objectTwo", dataTwo: this.forEachArrayTwo };
console.log({ ...this.newObjA, ...this.newObjB });

** EDIT **

Having spoken to you regarding your requirements, I can see a different solution.

Before calling componentData, you need to make sure you have the full data. To do this, we can use forkJoin to join the benchmark requests, and the project requests into one Observable. We can then subscribe to that Observable to get the results for both.

The code would look something like this:

 createComponent() {
    let benchmarks, projects;
    let form = this.productBenchMarkingForm[0];
    if (form.benchmarking && form.project) {
      benchmarks = form.benchmarking.filter(x => x.optionsUrl)
        .map(element => this.getOptions(element));

      projects = form.project.filter(x => x.optionsUrl)
        .map(element => this.getOptions(element));

      forkJoin(
        forkJoin(benchmarks), // Join all the benchmark requests into 1 Observable
        forkJoin(projects) // Join all the project requests into 1 Observable
      ).subscribe(res => {
        this.componentData({ component: NgiProductComponent, inputs: { config: AppConfig, injectData: { action: "add", titleProject: "project", dataProject: this.productBenchMarkingForm[0] } } });
      })
    }
  }

  getOptions(element) {
    return this.appService.getRest(element.optionsUrl).pipe(
      map((res: any) => {
        this.dataForOptions = res.data;
        element.options = res.data;
        return element;
      })
    )
  }

Here is an example in Stackblitz that logs the data to the console

Upvotes: 2

Related Questions