Angular 5 서비스를 통해 로컬 .json 파일을 읽습니다.

Angular 5 서비스를 통해 로컬 .json 파일을 읽습니다.

Angular 5를 사용하고 있으며 Angular-cli를 사용하여 서비스를 만들었습니다.

제가 원하는 것은 Angular 5의 로컬 json 파일을 읽어주는 서비스를 만드는 것입니다.

이게 제가 가진...난 좀 막혔어...

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

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

이걸 어떻게 끝내야 하죠?

먼저 주사를 놔야 해HttpClient그리고 아니다HttpClientModule, 두 번째로 삭제해야 할 것.map((res:any) => res.json())더 이상 필요하지 않을 것이다. 왜냐하면 새로운 것은HttpClient디폴트로 응답 본문이 표시됩니다.마지막으로 Import를 확인합니다.HttpClientModule당신의 안에서AppModule:

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

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

컴포넌트에 추가하려면:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Angular 7의 경우 다음 단계에 따라 json 데이터를 직접 Import했습니다.

tsconfig.app.json:

더하다"resolveJsonModule": true에"compilerOptions"

서비스 또는 컴포넌트:

import * as exampleData from '../example.json';

그리고 나서.

private example = exampleData;

json을 직접 Import하는 대체 솔루션이 있습니다.

컴파일하려면 typings.d.ts 파일에 이 모듈을 선언하십시오.

declare module "*.json" {
    const value: any;
    export default value;
}

고객님의 코드로

import { data_json } from '../../path_of_your.json';

console.log(data_json)

웹 서버에서 파일을 읽는 대신 로컬 파일을 읽을 수 있는 방법을 찾다가 이 질문을 발견했는데, 이를 "리모트 파일"이라고 부릅니다.

그냥 전화하세요.require:

const content = require('../../path_of_your.json');

Angular-CLI 소스 코드를 보고 영감을 받았습니다.이 코드에는 컴포넌트 템플릿이 포함되어 있습니다.templateUrl에 의한 재산.template그리고 그 가치는require실제 HTML 리소스에 호출합니다.

AOT 컴파일러를 사용하는 경우 노드 유형 정의를 조정하여 추가해야 합니다.tsconfig.app.json:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

프로젝트의 src/app 폴더에 다음과 같은 값을 가진 data.json 파일이 있다고 가정합니다.

[
    {
        "id": 1,
        "name": "Licensed Frozen Hat",
        "description": "Incidunt et magni est ut.",
        "price": "170.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 56840
    },
    ...
]

로컬 JSON 파일을 읽는 3가지 방법

방법 1: TypeScript 2.9+ import 문을 사용하여 로컬 JSON 파일을 읽습니다.

import { Component, OnInit } from '@angular/core';
import * as data from './data.json';

@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';

  products: any = (data as any).default;

  constructor(){}
  ngOnInit(){
    console.log(data);
  }
}

방법 2: Angular HttpClient를 사용한 로컬 JSON 파일 읽기

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';
  products: any = [];

  constructor(private httpClient: HttpClient){}
  ngOnInit(){
    this.httpClient.get("assets/data.json").subscribe(data =>{
      console.log(data);
      this.products = data;
    })
  }
}

방법 3: ES6+ import 문을 사용하여 Offline Angular Apps 로컬 JSON 파일 읽기

If your Angular application goes offline, reading the JSON file with HttpClient will fail. In this case, we have one more method to import local JSON files using the ES6+ import statement which supports importing JSON files.

그러나 먼저 다음과 같이 타이핑 파일을 추가해야 합니다.

declare module "*.json" {
  const value: any;
  export default value;
}

새 파일에 추가json-typings.d.tssrc/app 폴더에 파일을 저장합니다.

이제 TypeScript 2.9+와 마찬가지로 JSON 파일을 가져올 수 있습니다.

import * as data from "data.json";

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

자세한 내용은 이 문서를 참조하십시오.

시험해 보다

서비스 중 코드 작성하다

import {Observable, of} from 'rxjs';

json 파일 가져오기

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

인컴포넌트

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Typescript 3.6.3 및 Angular 6을 사용했을 때 이 솔루션들 중 어느 것도 나에게 효과가 없었다.

이 튜토리얼에 따르면 다음과 같은 작은 파일을 추가해야 합니다.njson-typings.d.ts다음 내용을 포함하는 프로젝트입니다.

declare module "*.json" {
  const value: any;
  export default value;
}

이 작업이 완료되면 하드코드된 json 데이터를 간단하게 Import할 수 있습니다.

import employeeData from '../../assets/employees.json';

내 컴포넌트에 사용합니다.

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }

JSON 파일을 만들고 navbar.json 원하는 이름을 붙일 수 있습니다.

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

메뉴 데이터가 포함된 JSON 파일을 만들었습니다.앱 컴포넌트 파일로 이동하여 아래 코드를 붙여넣습니다.

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

이제 Angular 7 앱이 로컬 JSON 파일의 데이터를 처리할 준비가 되었습니다.

app.component.html로 이동하여 다음 코드를 붙여넣습니다.

app.component.module

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

저는 데이터 파일을 Import하려고 해도 잘 되지 않았습니다.대신 데이터 파일을 assets 폴더로 옮기고 get request를 통해 접근을 시도했습니다.

 public getProjectTree()
   {
      return this.http.get("assets/data.json");
   }

언급URL : https://stackoverflow.com/questions/47206924/angular-5-service-to-read-local-json-file