Javascript 如何搜索和匹配Json文件中的2个输入字段值，如果找到匹配项，则返回同一Json对象中的第3个键值

我有两个输入字段，用户将在其中输入收货和送货区域名称。当用户完成第二个输入（送货或收货-无顺序）时，我想启动一个流程，从JSON文件中搜索两个输入值，如果找到两个输入的匹配项，则显示相关价格。我能够捕获两个输入上的值，但我需要一个方法将它们与JSON文件和成功的match show price进行比较。构造函数中定义的一个方法，提供Json文件中的所有对象

注意。查找匹配过程不会从单击开始，而是从（更改）值开始

模板

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

[{
    "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"
  }]

Json示例

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

[{
    "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"
  }]

---

您可以使用OnChanges生命周期挂钩，并使用array.prototype.find搜索产品数组。我看不到您声明表单的任何地方，所以我假设您使用的是被动表单。我建议切换到dynamicforms（），因为它将使获取值变得更容易

我的答案是假设您进行了此切换，并且在组件中声明了

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;
    });
  }
}

---

不过，我还是会关心如何搜索变化。这将导致在每次按键时搜索整个产品目录，如果目录很长，搜索速度会明显变慢。一个更好的解决方案是引入一个按钮，或者在焦点向外搜索，而不是进行更改（尽管这需要用户明显地将焦点向外搜索）。

完美。谢谢