从 Angular 中的服务 Api Rest 返回 JSONArray

Question

I am fairly new to Angular and Api Rest. I want call a URL from the service and respond with a JSONArray. For example: https://jsonplaceholder.typicode.com/posts

I'm calling a service from App.component and return a JSONArray but it show only from console.

My App.component:

import { Component, OnInit } from '@angular/core';
import { DataApiService } from 'src/app/services/data-api.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   constructor(private rest: DataApiService) { }

   ngOnInit() {
      this.getListProducts();
   }

   getListProducts(){
      this.rest.getAllProducts().subscribe(data => {
         console.log(data);
      });
   }
}

My Service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
   providedIn: 'root'
})

export class DataApiService {
   constructor(private http: HttpClient) { }

   getAllProducts(){
      const localUrl = 'assets/data/smartphone.json';
      return this.http.get(localUrl);
   }
}

Answer 1

Here how you access data

Declare variable

myData:any;

then catch that data

catchAndPrint(data)
{
this.myData:any=data;
console.log("Return data :",this.myData);
}

in your function

ngOnInit() {
      this.getListProducts();
   }

   getListProducts(){
      this.rest.getAllProducts().subscribe(data => {
         this.catchAndPrint(data);
      });
   }