角度：Webサービスからロードされたオブジェクトデータをループオーバー

Question

外部Webサービスからデータをロードしています。 私のコードは次のようになります。

マイ・サービス（restfullデータをロードする）：（データを表示するには、私の以前のサービスを注入しています）

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') 

が、私はこれが定義されていないことを示すエラーました：私はngForとでそれをフィルタリングしません

this.dataItems.length

をngIf、私はtsファイルのカウント値をキャッチしたいので、 ハイチャートウィジェットコンポネントで使用します。

Answer 1

countにまたはあなただけのフィルターを使用することができるフィルタのように

Answer 2

this.dataServer.loadDataItemsは非同期関数であり、すぐに結果を返しません。

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条件のバグを持っている：subscribe機能にロードされたオブジェクトの上にあなたがすべきループ。 =の代わりに===演算子を使用する必要があります。配列

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++ 
} 

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

ループオブジェクト... 長い時間が無いので、構文は次のようにも見間違って...

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

     return query?query.length:0; 

幸運