Объединить объект, используя машинопись

Question

В моем угловом приложении у меня есть следующие данные:

  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 });


  }

В моем реальном приложении приведена структура, поэтому любезно помогите мне достичь ожидаемого результата таким же образом.

Рабочая демонстрация https://stackblitz.com/edit/angular-gyched, которая имеет вышеуказанную структуру.

Здесь console.log(this.newObj) дает последний объект,

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

но я хочу объединить и то, и другое, и мне нужен результат, как показано ниже.

  {
  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" }
    ]
}

Пожалуйста, помогите мне достичь вышеуказанного результата. Если я ошибаюсь, пожалуйста, исправьте рабочий пример.

Answer 1

Вы присваиваете оба значения this.newObj, поэтому он просто перезаписывает первый объект.

Кроме того, цикл не нужен.Это ничего не добавляет.

Вместо этого вы можете:

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

** РЕДАКТИРОВАТЬ **

Поговорив с вами относительно ваших требований, я вижудругое решение.

Прежде чем звонить componentData, необходимо убедиться, что у вас есть полные данные.Чтобы сделать это, мы можем использовать forkJoin, чтобы объединить запросы тестов, и проект запросит в один Observable.Затем мы можем подписаться на этот Observable, чтобы получить результаты для обоих.

Код будет выглядеть примерно так:

 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;
      })
    )
  }

Вот пример вStackblitz, который записывает данные на консоль