Array as angular field

Issue

I have a response like:

[
    {
        "id": 1,
        "title": "ab",
        "description": "gazeta",
        "published": true,
        "comments": [
            {
                "id": 1,
                "content": null
            },
            {
                "id": 3,
                "content": null
            },
            {
                "id": 4,
                "content": null
            }
        ]
    },
    {
        "id": 2,
        "title": "ba",
        "description": "car",
        "published": false,
        "comments": [
            {
                "id": 2,
                "content": null
            }
        ]
    },
    {
        "id": 3,
        "title": "ab",
        "description": "gazeta",
        "published": true,
        "comments": []
    }
]

I have a service:

export interface tuts{
  id: number;
  title: string;
  description: string;
  published: boolean;
  comments: {id: number; content: string;}[]
}

@Injectable({
  providedIn: 'root'
})
export class TutorialsService {

  private baseUrl = "http://localhost:8080/tut/";
  
  constructor(private http:HttpClient) { }
  
  getAll(): Observable<any> {
    return this.http.get<tuts[]>(`${this.baseUrl}`+'tutorials');
  }
}

I tried to divide to two different interfaces, but still got Pic.1. And the list-component:

@Component({
  selector: 'app-tutorials',
  templateUrl: './tutorials.component.html',
  styleUrls: ['./tutorials.component.css']
})
export class TutorialsComponent implements OnInit {

  constructor(private tutorialsService: TutorialsService) { }
  tutorials: Observable<Tutorials[]>;
  tutorial : Tutorials = new Tutorials();
  deleteMessage=false;
  tutoriallist:any;
  isupdated = false;   

  ngOnInit() {
    this.isupdated=false;
    this.tutorialsService.getAll().subscribe(data =>{
      this.tutorials = data;
      console.log(data);
    })
  }
}

View:

<div class="panel-body">
  <table  class="table table-hover table-sm" >
      <thead class="thead-light">
          <tr>             
          </tr>
      </thead>
      <tbody>
           <tr *ngFor="let tut of tutorials">
              <td>{{tut.id}}</td>
              <td>{{tut.title}}</td>
              <td>{{tut.description}}</td>
              <td>{{tut.comments}}</td>
            </tr> 
      </tbody><br>
  </table>
</div>

And i got this

insted iteration of nested arrays.

Im using Angular 7. For endpoint i would like to display my response like Tree. Should I use something from angular 14?

Solution

The reason you're getting [object Object] is because comments is an array. So you have to add another ngFor for that and loop through it.

Try this:

<tbody>
  <tr *ngFor="let tut of tutorials">
    <td>{{tut.id}}</td>
    <td>{{tut.title}}</td>
    <td>{{tut.description}}</td>
    <td *ngFor="let comment of tut.comments">
        <span>{{comment.propertyName}}<span>
    </td>
  </tr> 
</tbody>

Answered By - Alpha