代码之家 › 专栏 › 技术社区 › Davtho1983

访问Angular 5中的json字段并放入变量

angular json arrays

Davtho1983 · 技术社区 · 8 年前

使用ngFor将json放入html相对容易,但我需要在组件的ts中获取json字段的值,以便将其放入图形中。

我的json中有一个名为“value”的字段。如何将所有值放入一个数组?

我目前的代码:

import { WeatherstatsService } from '../weatherstats.service';
import 'rxjs/add/operator/map';

@Component({
  selector: 'weatherchart',
  templateUrl: './weatherchart.component.html',
  styleUrls: ['./weatherchart.component.css']
})
export class WeatherchartComponent implements OnInit {

  constructor(private weatherstatsservice: WeatherstatsService) { }

  title = "Title";
  data: any;
  datavalues = [];

  chart = new Chart({
        chart: {
          type: 'line'
        },
        title: {
          text: this.title,
        },
        credits: {
          enabled: false
        },
        series: [{
          name: 'Line 1',
          data: [1, 2, 3]
        }]
      });

    // add point to chart serie
    add() {
      this.chart.addPoint(Math.floor(Math.random() * 10));
    }

    getyeardata(data, datavalues) {

    }

    ngOnInit() {
      this.weatherstatsservice.getWeatherData()
        .subscribe(data => {
          this.data = data;
        })

        console.log(value);
      // console.log(this.data)
    }
}

我的json看起来像这样,但很庞大:

[{"id":1,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JAN","value":6.1},{"id":2,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"FEB","value":7.2},{"id":3,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"MAR","value":8.9},{"id":4,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"APR","value":9.6},{"id":5,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"MAY","value":14.5},{"id":6,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JUN","value":17.1},{"id":7,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JUL","value":17.3},{"id":8,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"AUG","value":16.9},{"id":9,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"SEP","value":15.6},{"id":10,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"OCT","value":12.5},

json字段包括id、measurement\u type、location、year、month\u或season

错误日志:

WeatherchartComponent.html:7 ERROR TypeError: Cannot read property 'year' of null
    at Object.eval [as updateRenderer] (WeatherchartComponent.html:7)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14378)
    at checkAndUpdateView (core.js:13514)
    at callViewAction (core.js:13859)
    at execEmbeddedViewsAction (core.js:13817)
    at checkAndUpdateView (core.js:13510)
    at callViewAction (core.js:13859)
    at execComponentViewsAction (core.js:13791)
    at checkAndUpdateView (core.js:13515)
    at callViewAction (core.js:13859)

2 回复 | 直到 8 年前

Chaya Sandamali 8 年前

试试这个。

ngOnInit() {
      this.weatherstatsservice.getWeatherData()
        .subscribe(data => {
         if(JSON.stringify(data)!=[]){
           this.data=data;
           this.data.forEach( res => {
              this.datavalues.push(res.value);
           });
        }
    })
  }

(括号已更正)

chitanum 8 年前

let array;
array.push(object.value);

你试过这个吗?

也张贴对象

更新: 张贴对象的标准形式,以便我能更好地理解

.subscribe(data => {
this.data = data;
 this.data.forEach( result => {
      this.datavalues.push(result.value);
   });
})

尝试将请求和所有内容放在构造函数中,而不是放在ngOnInit中