无法使用 Angular 从本地 json 获取数据

Question

我正在尝试从本地 json 文件中获取数据，以便我可以在视图中操作数据（如果你选择 UnitOne，你唯一可以选择的 'roles' 是 'role1','role2','role3' 等)
所以我构建了一个示例应用程序来演示整个交易。基本上我收到此错误消息：

Error: Uncaught (in promise): SyntaxError: Unexpected token < in JSON at position 0 SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at Response.Body.json

这是代码 Link

Answer 1

您的 http 调用没有获取 JSON 文件，因为它不在 http://localhost/data.json。该调用返回一些 HTML，这就是您收到错误的原因。

您可以使用 TypeScript 导入 JSON 文件，而不是尝试通过 HTTP 请求它。

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { Http } from '@angular/http';
import { RootObject, Parameter, Infos, Info, ValidValues, Condition} from './data.model';

import json from './data.json'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: RootObject;
  print: string = '';
  constructor(private http: Http) { }

  ngOnInit() {
    this.data = json as RootObject;
    this.print = this.data.parameters[1].keyParameterName;
  }
}

这里是working version.

可能有更漂亮的方法来编写代码，但我会把它留给你。 :)

如果您绝对必须通过 HTTP 请求 JSON，那么我建议您将它放在您的资产目录中并改为调用 /assets/data.json。那可能行得通。或者使用 CDN/external URL 来请求它。但请记住，您需要在该服务器上启用 CORS，否则您的请求将被浏览器阻止。

Answer 2

唯一的问题是您的 json 文件不在 assets 文件夹中。

您应该将该文件移动到您的 assets 文件夹，然后尝试使用相同的代码，它会起作用。

Keep your file in the root of assets , as you are trying to fetch ./data.json ,

if you move to some of folder name asdf within assets , then you need to change it like ./asdf/data.json

无法使用 Angular 从本地 json 获取数据

Cant fetch data from local json using Angular

json

http

models

angular