Как получить объект, вложенный в другой объект, используя Angular

Question

Я использую объект из API, подобного этому.

Я могу получить данные, но не могу получить массив ChildSimpleProducts исключительно.

вот функция product.service

  getProducts = (): Observable<IProducts[]> => this.http.get<IProducts[]>(`${this.apiUrl + this.productsUrl}`);

, а вот функция компонента

  data: any = [];


productsArray: Observable<IProducts>[];
getProducts() {
this.productService.getProducts().subscribe(data => {
  this.data = data;
  this.productsArray = data["$values"];
  console.log(this.productsArray)
})

}

я пробовал несколько вещей, но продолжайте получать неопределенные и неопределенные объекты

Answer 1

Используйте forEach для l oop через все продукты Array и получите childSimpleProducts,

getProducts() {
 this.productService.getProducts().subscribe(data => {
  this.data = data;
  this.productsArray = data["$values"];
  this.productsArray.forEach( e => console.log(e.childSimpleProducts);
  //this.productsArray.filter( e => e.childSimpleProducts); // This will return you an array of childSimpleProducts
 })
}

Answer 2

Если вы правильно получаете данные из API, то data.$values возвращает результат

data: any = [];
productsArray: Observable<IProducts>[];
getProducts() {
    this.productService.getProducts().subscribe(data => {
      this.data = data;
      this.productsArray = data.$values;
      console.log(this.productsArray)
      this.productsArray.forEach(x=>{
          console.log(x.ChildSimpleProducts)
      })
    })
 }

Answer 3

Использовать библиотеку загрузки da sh для cloneDeep массива https://lodash.com/docs/#cloneDeep