Angular：从web服务加载的对象数据循环

Question

我正在加载数据形式的外部web服务。 我的代码如下所示：

我的服务（加载REST类型的数据）：

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

@Injectable() 
export class HttpService { 
    constructor(private http: Http) {} 

    loadDataItems(url: string) { 
    return this.http.get(url) 
     .map(data => { 
     data.json(); 
     return data.json(); 
     }); 
    } 
} 

我的组件（其中我注入我以前的服务来显示数据）：

import {Component, OnInit} from '@angular/core'; 
import 'rxjs/add/operator/map' 
import {HttpService} from '../http.service'; 

import * as $ from 'jquery'; 
import * as Highcharts from 'highcharts'; 

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'], 
    providers: [HttpService] 
}) 

export class ListComponent implements OnInit { 

    dataItems: any; 
    nb = 0; 
    private dataUrl = 'http://localhost:3000/list'; // URL to web api 

    constructor(private dataServer: HttpService) {} 
    ngOnInit() { 
    this.dataServer.loadDataItems(this.dataUrl).subscribe(
     data => { 
     this.dataItems = data; 
     console.log(this.dataItems); 
     } 
    ); 
    for (let i = 0 ; i < this.dataItems.length ; i++) { 
     if (this.dataItems.g = 'chrome') { 
     this.nb++ 
     } 
    } 

    // Build the chart 
     Highcharts.chart('chart2', { 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: 'Browser market shares January, 2015 to May, 2015' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true 
      } 
     }, 
     series: [{ 
      name: 'Brands', 
      colorByPoint: true, 
      data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33 
      }, { 
      name: 'Chrome', 
      y: 24.03, 
      sliced: true, 
      selected: true 
      }, { 
      name: 'Firefox', 
      y: 10.38 
      }, { 
      name: 'Safari', 
      y: 4.77 
      }, { 
      name: 'Opera', 
      y: 0.91 
      }, { 
      name: 'Proprietary or Undetectable', 
      y: 0.2 
      }] 
     }] 
     }); 
    } 
} 

我的目的是循环我收到的对象数据的项目，我需要用特定的ttribute：

if (this.dataItems.g = 'chrome') 

但我得到指示，这是没有定义的错误：

this.dataItems.length

我不会ngFor和过滤它ngIf，因为我想捕获ts文件中的计数值，在高图构件组件中使用它。

任何想法??

Answer 1

对于计数或过滤器你可以使用过滤器... 很久没有看到这么语法可能错...

 var query = myArray.filter(
         function(element){ 
          return element.propert == neededValue && 
           element.property == otherValue; 
         } 
        ); 

     return query?query.length:0; 

祝你好运

Answer 2

this.dataServer.loadDataItems是异步函数，它不立即返回结果。你应该在循环加载对象为subscribe功能：

ngOnInit() { 
    this.dataServer.loadDataItems(this.dataUrl).subscribe(
     data => { 
     this.dataItems = data; 
     console.log(this.dataItems); 
     for (let i = 0 ; i < this.dataItems.length ; i++) { 
      if (this.dataItems.g = 'chrome') { 
      this.nb++ 
      } 
     } 
    }); 
} 

此外，你必须在if条件的错误。您应该使用===运营商而不是=。

Answer 3

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

@Injectable() 
export class HttpService { 
    constructor(private http: Http) {} 

    loadDataItems(url: string) { 
    return this.http.get(url) 
     .map(data => data.json()); 
    } 
} 


import {Component, OnInit} from '@angular/core'; 
import 'rxjs/add/operator/map' 
import {HttpService} from '../http.service'; 

import * as $ from 'jquery'; 
import * as Highcharts from 'highcharts'; 

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'], 
    providers: [HttpService] 
}) 

export class ListComponent implements OnInit { 

    dataItems: any; 
    nb = 0; 
    private dataUrl = 'http://localhost:3000/list'; // URL to web api 

    constructor(private dataServer: HttpService) {} 
    ngOnInit() { 
    this.dataServer.loadDataItems(this.dataUrl).subscribe(
     data => { 
     this.dataItems = data; 

     for (let i = 0 ; i < this.dataItems.length ; i++) { 
      if (this.dataItems.g == 'chrome') { 
       this.nb++ 
      } 
     } 
     console.log(this.dataItems); 
     } 
    ); 

    // Build the chart 
     Highcharts.chart('chart2', { 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie' 
     }, 
     title: { 
      text: 'Browser market shares January, 2015 to May, 2015' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true 
      } 
     }, 
     series: [{ 
      name: 'Brands', 
      colorByPoint: true, 
      data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33 
      }, { 
      name: 'Chrome', 
      y: 24.03, 
      sliced: true, 
      selected: true 
      }, { 
      name: 'Firefox', 
      y: 10.38 
      }, { 
      name: 'Safari', 
      y: 4.77 
      }, { 
      name: 'Opera', 
      y: 0.91 
      }, { 
      name: 'Proprietary or Undetectable', 
      y: 0.2 
      }] 
     }] 
     }); 
    } 
} 

Answer 4

循环对象像数组

let yourObject = { 
    name: "firas", 
    age: "20" 
} 

Object.keys(yourObject).forEach(key => { 
    let valueFromObject = yourObject[key] // firas 
}) 

，关心

if (this.dataItems.g = 'chrome') { --> = change to == 
     this.nb++ 
}