Question

因为我是Angular的新手，任何人都可以使用angular 2来提供一个关于加载JSON文件数据的简单解决方案。

我的代码如下所示

Index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app.component.ts

import {Component} from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
          <div id="main">
            Main Div
               <div id = "header"></div>
               <div id = "content">
                  <ul class="games">
                      <li>
											
                      </li>
                  </ul>
               </div>
          </div>
  		 `
})
export class AppComponent {
 }

games.json

{
	"games":[
		{
			"title":"Primary Operations",
			"enabled":true
		},
		{
			"title":"Curated Games",
			"enabled":false
		}
	]
}

我想从app.component.ts获取所有来自games.json的游戏请详细说明。

提前致谢

Answer 1

以下是解析JSON的代码的一部分，它可能对您有所帮助：

import { Component, Input } from '@angular/core';
import { Injectable }     from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AppServices{

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

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

     }
}

Answer 2

将json文件保存在Assets（与app dir并行）目录

中

请注意，如果您使用ng new YourAppname生成，则此资产目录与“app”目录存在相同的行，并且服务应该是app目录的子目录。可能如下所示：

::应用程序/服务/ myservice.ts

getOrderSummary(): Observable {
    // get users from api
    return this.http.get('assets/ordersummary.json')//, options)
        .map((response: Response) => {
            console.log("mock data" + response.json());
            return response.json();
        }
    )
    .catch(this.handleError);
}

Answer 3

如果你使用angular-cli将json文件保存在Assets文件夹（与app dir并行）目录中

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

注意：这里你只需要在assets / json / oldjson.json之类的资源文件夹中给出路径，然后你需要编写像/json/oldjson.json这样的路径

如果你使用webpack，那么你需要在公共文件夹中遵循相同的结构，类似于资产文件夹。

Answer 4

在Angular 5中

你可以说

@IBInspectable var tabButtonBorderWidth: CGFloat = 1.0

@IBInspectable var borderWidth: CGFloat = 0{
    didSet{
        layer.borderWidth = borderWidth
    }
}

@IBInspectable var borderColor: UIColor? {
    didSet{
        updateView()
    }
}

@IBInspectable var cornerRadius: CGFloat = 0{
    didSet{
        layer.cornerRadius = cornerRadius
    }
}

@IBInspectable var tabsButton : Bool = false{
    didSet{
        updateView()
    }
}

var border: CALayer?

func updateView(){
    if let border = border {
        border.borderColor = borderColor?.cgColor
        border.borderWidth = tabButtonBorderWidth
        return
    }
    border = CALayer()
    border.borderColor = borderColor?.cgColor
    let width = tabButtonBorderWidth
    border.borderWidth = width
    border.frame = CGRect(x: 0, y: frame.size.height - width, width:  frame.size.width + 20, height: frame.size.height)
    layer.addSublayer(border)
    layer.masksToBounds = true
}

这将为您提供this.http.get<Example>('assets/example.json')

Answer 5

您需要对games.json进行 HTTP 调用才能检索它。类似的东西：

this.http.get(./app/resources/games.json).map

Answer 6

您不需要 HttpClient ，甚至不需要Angular。您只需要WebPack和JSON-Loader，它们都已成为Angular-CLI的一部分。

您需要的所有代码是这一行：

import * as someName from './somePath/someFile.json;

您的json数据可以在someName.default下找到。但是，此代码将引发TypeScript编译器的类型错误-这不是真正的错误，而只是类型错误。

要解决该问题，请将此代码添加到您的src/typings.d.ts文件中（如果不存在，请创建它）：

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

请注意：使用此方法将在构建时将json（最小化/丑化）编译到应用程序包中。这意味着您不必等到该文件加载完毕（就像您选择使用httpClient.get(...)一样），这意味着更快的应用程序！

Answer 7

我认为assets文件夹是公共的，您可以直接在浏览器上访问它

http://localhost:4020/assets/

与其他privates文件夹不同，将json文件放在assets文件夹

中

Answer 8

service.service.ts
--------------------------------------------------------------

import { Injectable } from '@angular/core';
import { Http,Response} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {
 private url="some URL";

constructor(private http:Http) { }     

//getData() is a method to fetch the data from web api or json file

getData(){
           getData(){
          return this.http.get(this.url)
            .map((response:Response)=>response.json())
        }
          }
}






display.component.ts
--------------------------------------------

//In this component get the data using suscribe() and store it in local object as dataObject and display the data in display.component.html like {{dataObject .propertyName}}.

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/service.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
      dataObject :any={};
constructor(private service:ServiceService) { }

  ngOnInit() {
    this.service.getData()
      .subscribe(resData=>this.dataObject =resData)
}
}

Answer 9

我需要同步加载设置文件，这是我的解决方案：

export function InitConfig(config: AppConfig) { return () => config.load(); }

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
    Settings: ISettings;

    constructor() { }

    load() {
        return new Promise((resolve) => {
            this.Settings = this.httpGet('assets/clientsettings.json');
            resolve(true);
        });
    }

    httpGet(theUrl): ISettings {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.open( 'GET', theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse(xmlHttp.responseText);
    }
}

然后将其作为app_initializer提供，该应用程序在应用程序的其余部分之前加载。

<强> app.module.ts

{
      provide: APP_INITIALIZER,
      useFactory: InitConfig,
      deps: [AppConfig],
      multi: true
    },

Answer 10

例如，在声明 @Component

之前在组件中

const en = require('../assets/en.json');

Answer 11

public init() {
    return from(
      fetch("assets/server-config.json").then(response => {
        return response.json();
      })
    )
      .pipe(
        map(config => {
          return config;
        })
      )
      .toPromise();
  }

如何在Angular 2中获取JSON文件

11 个答案: