I am pretty new to Angular. I have successfully use Visual Studio 2022 to produce an Angular 11 app that performs CRUD operations against a SQL Server database. So my first attempt was a success. But my second assignment is to produce an app that calls an RESTfull API that uses the HTTPS protocol and returns JSON data. I believe my call to the API is structured correctly, but I can’t get the values from the JSON data to show up on my HTML form. I have read and followed numerous tutorials, but I can’t find a solution. In every case, the JSON data return appears to be a blank object: [object Object].

My project is too large to list all the components in this post, but I have produced a very simple application that reproduces the same problem. All of the code is contained in a single TS component file (courses.component.ts):

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { HttpClient } from "@angular/common/http";
import * as _ from 'lodash';
import { map } from 'rxjs/operators';

interface Course {
  description: string;
  courseListIcon: string;
  iconUrl: string;
  longDescription: string;
  url: string;
}

@Component({
  selector: 'app-courses',
  template: `
      <ul *ngIf="courses$ | async as courses else noData">
          <li *ngFor="let course of courses">
              {{course.description}}
          </li> 
      </ul>
      <ng-template #noData>No Data Available</ng-template>
  `})

export class CoursesComponent implements OnInit {
  courses$: Observable<Course[]>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    let url = "https://angular-http-guide.firebaseio.com/courses.json?orderBy=%22$key%22&limitToFirst=4";

    let jsonData = this.courses$ = this.http
      .get<Course[]>(url)
      .pipe(map(data => _.values(data)));

    console.log("jsonData: " + jsonData);
    return jsonData;
  }
}

The project compiles and the app launches, displaying the following:

I’m not positive, but I think the JSON data returned by the API is correct because it contains 4 records, and you can see the four bullet points on the web page. But, in the developer tool pane of the Chrome browser, you can see that my console.log statement results in “jsonData: [object Object].” So, I think the correct data is in the JSON, I just can’t get it to display on the form. I have tried all kinds of things recommended in various articles, but all with the same results

I would sure appreciate some help. Thanks! Frank