Merge the object using typescript

Question

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..

user184994 · Accepted Answer · 2018-11-18 15:08:34Z

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

But in my project i have structure like this only.. So only i have explained with foreach.. Also mentioned the same in my question that is the structure i am using..
Also i know this solution already but that is not in my case.. I making the code as like in my question...
Okay, well at the moment your question doesn't give enough information for me to answer. Can you give the actual structure of your data then please? Then maybe I can understand why you need to use a loop.
If not this one possible, Kindly help me how to correct the above code.. Because i am passing the newObj to another component in angular so i need to assign both separate values to the obj and to get in that component..
I have updated the question.. Here i am loading the another component so am sending data via that componentData and i am getting it in this.injectedDataFromComponentOne inside component two.. But the thing is i am getting the second object value alone there as like i explained in my question..

Collectives™ on Stack Overflow

Merge the object using typescript

1 Answer 1

16 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Linked

Related