Javascript 将json数据放入数组2

我不确定我的代码中缺少了什么，但目前我在运行代码时没有出现任何错误，但我也没有看到预期的结果。我有一个json文件，我正在加载到一个数组中，并希望通过该数组循环并在页面上显示其部分数据

以下是我到目前为止的情况：

服务文件

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

@Injectable()

export class AddressDataService{
    addressData: Array<any>;

    constructor(private http:Http){ }
    getAddressData(){
        return this.http.get('./api/addressData.json')
                 .map((res:Response) => res.json());
    }
}

[{
    "type": "home",
    "id": 1
}, {
    "type": "apartment",
    "id": 2
}, {
    "type": "homeless",
    "id": 3
}]

import { Http } from '@angular/http';
import { AddressDataService } from './address.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: '....',
  styleUrls: ['./styles.css'],
  providers: [AddressDataService]
})

constructor(private addressDataService: AddressDataService) {}
  addressData = [];
  getAddressData() {
  this.addressDataService.getAddressData()
                   .subscribe(data => this.addressData = data);
}

<div *ngFor="let addressDetail of addressData">
    {{addressDetail.type}}
</div>

组件文件

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

@Injectable()

export class AddressDataService{
    addressData: Array<any>;

    constructor(private http:Http){ }
    getAddressData(){
        return this.http.get('./api/addressData.json')
                 .map((res:Response) => res.json());
    }
}

[{
    "type": "home",
    "id": 1
}, {
    "type": "apartment",
    "id": 2
}, {
    "type": "homeless",
    "id": 3
}]

import { Http } from '@angular/http';
import { AddressDataService } from './address.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: '....',
  styleUrls: ['./styles.css'],
  providers: [AddressDataService]
})

constructor(private addressDataService: AddressDataService) {}
  addressData = [];
  getAddressData() {
  this.addressDataService.getAddressData()
                   .subscribe(data => this.addressData = data);
}

<div *ngFor="let addressDetail of addressData">
    {{addressDetail.type}}
</div>

HTML文件

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

@Injectable()

export class AddressDataService{
    addressData: Array<any>;

    constructor(private http:Http){ }
    getAddressData(){
        return this.http.get('./api/addressData.json')
                 .map((res:Response) => res.json());
    }
}

[{
    "type": "home",
    "id": 1
}, {
    "type": "apartment",
    "id": 2
}, {
    "type": "homeless",
    "id": 3
}]

import { Http } from '@angular/http';
import { AddressDataService } from './address.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: '....',
  styleUrls: ['./styles.css'],
  providers: [AddressDataService]
})

constructor(private addressDataService: AddressDataService) {}
  addressData = [];
  getAddressData() {
  this.addressDataService.getAddressData()
                   .subscribe(data => this.addressData = data);
}

<div *ngFor="let addressDetail of addressData">
    {{addressDetail.type}}
</div>

{{addressDetail.type}

---

我这样做对吗？

在您的组件文件中：

.subscribe(
      data => {
        const helperArray = [];
        for (let key in data) {
          helperArray.push(data[key]);
        }
      }
);

---

您需要调用您的

getAddressData

，例如在您的

OnInit

中，我假设您希望在导航到页面时获取数据

因此：

当这个问题得到解决时，您将面临另一个问题。Http请求不允许相对路径，因此

return this.http.get('./api/addressData.json')

---

将导致错误，您需要将“url”中的点替换为json文件的实际完整路径，从顶层文件夹开始。

组件类中的某些内容需要调用getAddressData方法。要么是构造器，或者更好的选择是实现OnInit并从那里调用它。

什么时候为组件调用

getAddressData

？@ExplosionPills既然您引起了我的注意，我实际上没有看到我在组件中调用

getAddressData

，我会在我必须创建的OnInit函数中这样做吗？我想

ngOnInit

将是一个很好的地方，谢谢-但我想问一下实际的完整路径：我尝试了以下方法，但我得到了一个404文件：

'./src/api/addressData.json'

，完整路径是

/Users/userName/Projects/Angular2/quickstart/src/api/addressData

，然后您应该像这样使用它：

返回这个.http.get（'src/api/addressData.json'）

所以您几乎是正确的，只需删除点：）谢谢我还使用了

http://myjson.com/

并且很好地存储了我的json。太棒了！很高兴听到：）