如何解析angular9中的嵌套对象数组

Question

so i have this json (as it looks its an array of nested objects)

[
    {
        "_id": "5f71c793007e542360a883e4",
        "nom": "modified",
        "description": "modified",
        "cours": [{
            "_id": "5f71d4e3a20bd03e10b766ee",
            "title": "test",
            "description": "test"
        }]
    },
    {
        "_id": "5f71ec3f78f8553718854219",
        "nom": "second",
        "description": "tesst",
        "cours": [{
            "_id": "5f71ec3f78f855371885421a",
            "titre": "hhea",
            "description": "hhaasas"
        }]
    }
]

this is the api service which does consume the api and retrieve the results

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({providedIn: 'root'})

export class ApiService {
    private SERVER_URL = "http://localhost:3000/api";

    constructor(private httpClient: HttpClient) {}

    public fetchData() {
        return this.httpClient.get(`${this.SERVER_URL}/modules`);

    }
}

and here i'm fetching the data and storing it in a array "modules[]"

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {module} from '../models/module';
import {Observable} from 'rxjs/Observable';
import {ApiService} from '../api.service';

@Component({
    selector: 'app-all-modules',
    templateUrl: './all-modules.component.html',
    styleUrls: ['./all-modules.component.css']
})
export class AllModulesComponent implements OnInit {
    modules = [];
    constructor(private apiService: ApiService) {}
    ngOnInit(): void {
        this.apiService.fetchData().subscribe((data: module[]) => {
            console.log(data);
            this.modules = data;
        })
    }
}

and this is my model

export interface module {

    id: string;
    nom: string;
    description: string;
    cours: [{
        titre: string;
        description: string;
    }]

}

i'm trying to get each element in the array on the modules array but i'm getting all the json in one element

Answer 1

Please try this. You have to iterate over the array so that you can push the element by itself and not the whole array.

this.apiService.fetchData().subscribe((data: module[]) => {
  data.forEach((element) => {
    this.modules.push(element);
  });
});

Answer 2

or in an easier way, do like this :

this.apiService.fetchData().subscribe((data: module[]) => {
    Array.prototype.push.apply(this.modules, data);
});