[하이브리드앱 ionic]시작해보기 11 - get함수 이용해 json 파일 읽어오기

module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({

imports: [] 안에 

HttpClientModule를 추가합니다. 

 

 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpClientModule
   ],
....

 

 

 

asset 파일안에 test.json 파일을 생성합니다.

 

/asset/test.json

{
    "results": [
      "Item 1",
      "Item 2"
    ]
  }

 

 

page.ts

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


@component([
.
.
.
})

export class ....{

	constructor(...., private http: HttpClient) {
    }
    
    ngOnInit(): void {
    // Make the HTTP request:
    this.http.get<ItemsResponse>("../../assets/test.json", {observe: 'response'}).subscribe(
      resp => {
        console.log(resp.body.results);
      },
      err => {
        console.log("error" + err.error);
      }
    
    );
  	}


}
interface ItemsResponse {
  results: string[];
}

HttpClient를 import 한후 constructor에 선언하고

 

ngOnInit() 함수를 정의합니다.

 

json 파일의 interface 를 정의한 후 

 

http.get 함수를 이용해 가져옵니다. 

 

this.http.get<json을 정의한 interface>("json경로", {observe 옵션}).subscribe(
  resp => {
    	//응답했을때
	} , 
    err =>{
    	//에러발생
  	}
);