Question

我在服务器中上传了一个有角项目和一个json文件。我需要将json数据添加到我的组件中。

Json文件如下：

{ 
    "name":"AB", 
    "age":22, 
    "details": [
        {
            "country":"USA"
        },
        {
            "City":"LA"
        }
    ] 
}

我正在使用http get方法调用json文件。我有这个组件。

import { Component, OnInit } from '@angular/core';
import { HttpClient} from '@angular/common/http';

@Component({
    selector: 'app-filter',
    templateUrl: './filter.component.html',
    styleUrls: ['./filter.component.css']
})
export class FilterComponent {

    name:string;

    constructor(private httpClient:HttpClient) { 
    this.httpClient.get('http://mywebdata/explore/jsonfile')
    .subscribe(
            (dat:any) => {
                this.name = dat.name;
            }
        )
    }

}

还有html：

<div>
    <p>{{name}} is total</p>
</div>

当我运行该应用程序时，它仅显示“总计”，并且在控制台中没有任何错误。我在这里错过了什么？

Answer 1

我认为您在这里遇到一些问题。

您的JSON无效。您在年龄名称/值对之间缺少一个冒号。
在下面的代码中，请注意我执行了data.json（）并将其存储到变量中，然后使用该变量。这样会将数据转换为JSONObject格式，可以使用JSONPath语法进行导航。

此外，请注意从（dat：any）=> 更改为 data =>

将您的订阅更改为以下内容：

.subscribe(
    data => {
      let responseJSON = data.json();

      console.log(responseJSON);
      this.name = responseJSON.name;
      console.log(this.name);
    });

Answer 2

要在文件内使用JSON，您需要将此文件部署在本地服务器上（如果您未加载json文件），这就是为什么您无法从JSON检索数据的原因。尝试这种方式一次，在angular-cli.json中添加以下代码。

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico",
    { "glob": "jsonfile.json", "input": "./", "output": "./assets/" }
  ],..

或者您可以使用以下代码

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
name:string;
constructor(private http:Http) { }

public getName(){
return this.http.get('http://mywebdata/explore/jsonfile')
  .map((response: Response) => {
    const data = response.json();
    this.name = data.name;
    return data.name;
  })
  .catch((error: Response) => {
    return Observable.throw('Something went wrong');
  });
}   
}

获取JSON收集数据到角度

2 个答案: