Jsonファイル内の2つの入力フィールド値を検索して一致する場合、同じjsonオブジェクトから3番目のKey値を返します

Question

2つの入力フィールドがあり、ユーザーはPickupおよびDeliveryエリア名を入力します。 （配信またはピックアップ - シーケンスなし）私は両方の入力値がJSONファイルから検索され、両方の入力の一致が見つかった場合、関連する価格を表示するプロセスを開始したいと思います。私は両方の入力で値を取得することができますが、私はJSONファイルと成功するショー価格と比較する方法が必要です。コンストラクタで定義されたメソッドで、Jsonファイル内のすべてのオブジェクトを取得します。

注。 MATCH PROCESSがCLICKで始まらず、むしろ値の（変更）から始まります。あなたはONCを使用することができます

テンプレート

<div class="form-group"> 
    <input class="form-control" id="pickupSuburb" (change)="onSelectedSuburb($event)" placeholder=" Pickup Suburb Here" [(ngModel)]="pickupSuburb" > 
</div> 

<div class="form-group"> 
    <input list="suburb" class="form-control" id="deliverySuburb" (change)="onSelectedSuburb($event)" placeholder=" Delivery Suburb Here" [(ngModel)]="deliverySuburb" > 
</div> 

コンポーネント

import {Component, OnInit, ElementRef } from '@angular/core'; 
import 'rxjs/add/operator/map' 
import { FormControl } from '@angular/forms'; 
import {Http} from '@angular/http'; 

@Component({ 
    selector: 'app-sending', 
    templateUrl: './sending.component.html', 
    styleUrls: ['./sending.component.css'], 
    providers: [SuburbsService, AutoCompleteSuburbs, CapitalizePipe ], 
}) 

export class SendingComponent implements OnInit { 
    priceList = []; 

    constructor(private elm: ElementRef, private http: Http) { 
    http.get('./assets/zoneRates.json').subscribe(response => { 
     this.priceList = response.json(); 
    }) 
    } 

    ngOnInit() {} 

    public onSelectedSuburb(event) { 
    const pickupArray = this.elm.nativeElement.querySelector('#pickupSuburb').value.slice(1).slice(-3); 
    const deliveryArray = this.elm.nativeElement.querySelector('#deliverySuburb').value.slice(1).slice(-3);} 

JSONサンプル

[{ 
    "pickup": "SYD", 
    "delivery": "QC4", 
    "weight": "25", 
    "price": "6.25" 
    }, { 
    "pickup": "SYD", 
    "delivery": "QC6", 
    "weight": "25", 
    "price": "6.25" 
    }, { 
    "pickup": "SYD", 
    "delivery": "QC7", 
    "weight": "25", 
    "price": "6.25" 
    }, { 
    "pickup": "SYD", 
    "delivery": "ADL", 
    "weight": "25", 
    "price": "6.25" 
    }] 

Answer 1

lifecycle hookをハングし、array.prototype.findを使用して製品の配列を検索します。あなたがフォームを宣言しているところはどこにも見当たらないので、私はあなたが反応型フォームを使用していると仮定しています。動的フォーム（https://angular.io/guide/dynamic-form）に切り替えることをお勧めします。これは値を簡単にするためです。

このスイッチを作成し、フォームの関連する入力にバインドされたpickupInputとdeliveryAreaInputプロパティをコンポーネントで宣言していると仮定します。 reactiveFormsに固執する必要がある場合は、これらの値を別の方法で取得する必要があります。

export class sendingComponent implements onChanges, onInit { 
    private pickupInput: FormControl = new FormControl('', Validators.required); // You may need different validation than this. 
    private deliveryAreaInput: FormControl = new FormControl('', Validators.required); // again your validation may differ. 

    /** 
    * Checks if either pickupInput or deliveryAreaInput are in the changes object. 
    * If either key is included pass both values to the searchJson method and store the response in a match property 
    * If match is truthy show the price 
    * @param {SimpleChanges} changes 
    */ 
    ngOnChanges(changes: SimpleChanges) { 
    if (changes.pickupInput || changes.delieveryAreaInput) { 
     const match: any = this.searchJson(this.pickupInput.value, this.deliveryAreaInput.value); 
     if (match) { 
     this.showPrice = true; // Use this with an ngIf in your template 
     } 
    } 
    } 

    /** 
    * Use Array.prototype.find to search through the priceList array for any products that have a matching pickup and delivery area. 
    * Array.prototype.find returns either the matching value or undefined if no matches are found. 
    * @param {string} pickup 
    * @param {string} deliveryArea 
    * @return {?} either the matching value or undefined 
    */ 
    private searchJson(pickUp: string, deliveryArea: string): any { 
    return this.priceList.find(price => { 
     return price.pickup === pickUp && price.delivery === deliveryArea; 
    }); 
    } 
} 

私はこの変更を行っても心配です。これは、各キープレスで製品カタログ全体を検索することになります。カタログが長い場合は目立って遅くなります。より良い解決策は、ボタンを導入すること、または変更の代わりにフォーカスを外に出すことです（ユーザには明らかに焦点を合わせる必要があります）。