从 json 文件中获取数据并将其显示给 DataTable - Angular2答案

【问题标题】：Fetch data from json file and show it to DataTable - Angular2从 json 文件中获取数据并将其显示给 DataTable - Angular2
【发布时间】：2017-11-02 13:56:30
【问题描述】：

我是 Angular2 的新手，无法解决下一个问题。感谢您的帮助。我在 data.json 文件中有一些数据：

[ 
 {
   "name": "Jayme",
   "email": "a.nunc.In@convallisante.ca",
    "regDate": "2016-02-07T10:22:09-08:00",
    "city": "Ville de Maniwaki",
    "age": 30
  },
  {
    "name": "Bo",
    "email": "posuere.cubilia.Curae@estNunclaoreet.net",
    "regDate": "2016-08-16T20:42:44-07:00",
    "city": "Pak Pattan",
    "age": 24
  },
  {
    "name": "Matthew",
    "email": "enim.Mauris.quis@vehicula.edu",
    "regDate": "2015-05-01T01:53:59-07:00",
    "city": "Alacant",
    "age": 35
  },
  {
    "name": "Justina",
    "email": "Donec.nibh@Vivamusmolestie.ca",
    "regDate": "2015-06-24T14:38:07-07:00",
    "city": "Kobbegem",
    "age": 22
  }
]

这是我的sit_log.component.ts

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

@Component({
  selector: 'sit_log',
  templateUrl: './sit_log.html'
})
export class SIT_log implements OnInit{

  public data;
  public filterQuery = "";
  public rowsOnPage = 10;
  public sortBy = "email";
  public sortOrder = "asc";

  constructor(private http: Http) { }

  ngOnInit(): void {
    console.log(window.location.href);

    this.http.get("http://localhost:4200/index.html#/pages/sit_log/data.json")
        .subscribe((data)=> {
            setTimeout(()=> {
                this.data = data.json();
            }, 1000);
        });
   }

}

当我运行代码时，我收到下一个错误：

core.es5.js:1084 ERROR SyntaxError: Unexpected token < in JSON at position 0
at Object.parse (<anonymous>)
at Response.Body.json (http.es5.js:800)
at SafeSubscriber._next (sit_log.component.ts:23)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at XMLHttpRequest.onLoad (http.es5.js:1229)
at ZoneDelegate.webpackJsonp.688.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:4140)

有人知道吗？问候。

【问题讨论】：

修剪data.json中内容前面的空格
@OluwafemiSule 我认为这不会导致应用出现任何错误
@evgeny 在分配之前尝试使用console.log(data)，我认为您正在获取 JSON 格式的数据并且您再次将其解析为 JSON 格式
“url”对我来说有点奇怪...？
需要将@Injectable() 放在@Component 上方。

标签： angular web frontend jscript

【解决方案1】：

感谢您的所有回复:) 我将 data.json 文件替换为 assets/data 指令，一切正常。再次感谢:)

【讨论】：