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

时间:2017-06-01 12:09:25

标签: angular web frontend jscript

我是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)

有人有点想法吗? 问候。

1 个答案:

答案 0 :(得分:0)

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