Question

我正在尝试从Angular 2中我的资源文件夹中的JSON文件中获取数据，但它没有显示它。我想从以下JSON文件中获取数据：

test.json

[
    "{'id': 1, 'building': 'Edificio 4', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 2, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 0, 'school': 1}",
    "{'id': 3, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 4, 'building': 'Edificio 2', 'zone': 'C', 'floor': 2, 'school': 2}",
    "{'id': 5, 'building': 'Edificio 2', 'zone': 'B', 'floor': 3, 'school': 2}",
    "{'id': 6, 'building': 'Edificio 7', 'zone': 'J', 'floor': 7, 'school': 2}"
]

我正在尝试这样做的组件就是这个：

locker.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

//this is the data class
class Place{
  constructor(public id: string, public building: string, public zone: string, public floor: string, public school: string) { }
}

@Component({
  selector: 'app-locker',
  template: `
  //here i have a template
`,
  styleUrls: ['./locker.component.css'],

})

@Injectable()
export class LockerComponent implements OnInit {

  places: Place[];
//if I manually add the data by hand here it works,
//I want to fetch the JSON data to this array

  campus: String;
  building: String;
  floor: String;
  zone: String;
  type: String;

  buildings = [];
  floors = [];
  zones = [];
  types = [];

  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.http.get('./assets/test.json').subscribe(data => {
    this.places = data;
    });
  }
}

我也在我的app.component.ts中导入了HttpClientModule，如https://angular.io/guide/http中所述

我已经阅读了类似问题的其他stackoverflow答案，但它们似乎不起作用，答案有点模糊，因为它们不显示所有代码而只显示片段。

关于为什么这不起作用的任何想法？

我还在这里放置了我正在使用的功能，根据我在另一个选择中的选择显示其中一个选项的数据：

onChangeCampus(event: any){
    const campus = event.target.value;
    this.buildings.length = 0;
    this.floors.length = 0;
    this.zones.length = 0;
    this.types.length = 0;
    for(let i of this.places){
      if (i.school == campus && !(this.buildings.indexOf(i.building) > -1)){
        this.buildings.push(i.building);
      }
    }
  }

Answer 1

您应该定义请求的返回值：

 this.http.get<Place[]>('./assets/test.json').subscribe(data => {
   this.places = data;
 });

Answer 2

您可以通过httpClient模块调用json文件，方法是调用：

getFile():Observable<Object>{
    return this.http.get('http://localhost:4200/assets/file.json');
}

并且您必须将该文件保留在assets文件夹中，以便您可以访问它。我希望这会有所帮助。

Answer 3

就像卢卡斯一样，你的第一个问题是返回值类型

this.http.get<Place[]>('./assets/test.json').subscribe(data => {
   this.places = data;
 });

我相信你的test.json格式也很少。

[
    "{'id': 1, 'building': 'Edificio 4', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 2, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 0, 'school': 1}",
    "{'id': 3, 'building': 'Edificio 15', 'zone': 'Sin zonas', 'floor': 1, 'school': 1}",
    "{'id': 4, 'building': 'Edificio 2', 'zone': 'C', 'floor': 2, 'school': 2}",
    "{'id': 5, 'building': 'Edificio 2', 'zone': 'B', 'floor': 3, 'school': 2}",
    "{'id': 6, 'building': 'Edificio 7', 'zone': 'J', 'floor': 7, 'school': 2}"
]

什么时候应该是这样的。我删除了包装“标记并更改为”标记

[
  {"id": 1, "building": "Edificio4", "zone": "Sin zonas", "floor": 1, "school": 1},
  {"id": 2, "building": "Edificio15", "zone": "Sin zonas", "floor": 0, "school": 1},
  {"id": 3, "building": "Edificio15", "zone": "Sin zonas", "floor": 1, "school": 1},
  {"id": 4, "building": "Edificio2", "zone": "C", "floor": 2, "school": 2},
  {"id": 5, "building": "Edificio2", "zone": "B", "floor": 3, "school": 2},
  {"id": 6, "building": "Edificio7", "zone": "J", "floor": 7, "school": 2}
]

从Angular2中的JSON获取数据不起作用

3 个答案: