Javascript 筛选键值对内数组中的特定值

从给定的对象中，我需要根据用户输入筛选出城市

我有一个目标：

arr= [
    {'country':'india','cities':['bangalore','chennai']},
    { 'country': 'USA' , 'cities': ['New yourk','Chicago'] }
  ]

默认情况下，它将以html显示每个国家和值。当用户在输入中键入值时，我只需要显示与输入匹配的“城市”

以下是链接：

当有人开始键入内容时，我需要显示与用户输入匹配的结果

filteredArray = input.valueChanges.pipe(
 map(inputValue => arr.filter(arrValue => arrValue.startsWith(inputValue)))
);

并在FilterDarray上使用异步管道

并在FilterDarray上使用异步管道。

尝试一下：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  display = [];
  arr = [
    { 'country': 'india', 'cities': ['Bangalore', 'Chennai'] },
    { 'country': 'USA', 'cities': ['New York', 'Chicago'] }
  ]
  name = 'Angular';
  constructor() {
    this.display = this.arr;
  }


  search(e) {
    let input = e.target.value.toLowerCase();
    // this.display = input ? this.filter(input) : this.arr;
    this.display = input ? this.filterByArrayMethods(input) : this.arr;
  }

  filter(val) {
    let res = [];
    this.arr.forEach(countryObj => {
      const countryToAdd = {
        country: countryObj.country,
        cities: countryObj.cities.filter(city => city.toLowerCase().includes(val))
      };
      if(countryToAdd.cities.length > 0) {
        res.push(countryToAdd);
      }
    });
    return res
  }

  filterByArrayMethods(val) {
    return this.arr.reduce((accumulator, countryObject) => {
      const citiesInTheCountry = countryObject.cities.filter(cityName => cityName.toLowerCase().includes(val));
      if (citiesInTheCountry.length > 0) accumulator.push({ ...countryObject, cities: citiesInTheCountry })
      return accumulator;
    }, []);
  }


}

---

这是给你的裁判的一封信

尝试一下：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  display = [];
  arr = [
    { 'country': 'india', 'cities': ['Bangalore', 'Chennai'] },
    { 'country': 'USA', 'cities': ['New York', 'Chicago'] }
  ]
  name = 'Angular';
  constructor() {
    this.display = this.arr;
  }


  search(e) {
    let input = e.target.value.toLowerCase();
    // this.display = input ? this.filter(input) : this.arr;
    this.display = input ? this.filterByArrayMethods(input) : this.arr;
  }

  filter(val) {
    let res = [];
    this.arr.forEach(countryObj => {
      const countryToAdd = {
        country: countryObj.country,
        cities: countryObj.cities.filter(city => city.toLowerCase().includes(val))
      };
      if(countryToAdd.cities.length > 0) {
        res.push(countryToAdd);
      }
    });
    return res
  }

  filterByArrayMethods(val) {
    return this.arr.reduce((accumulator, countryObject) => {
      const citiesInTheCountry = countryObject.cities.filter(cityName => cityName.toLowerCase().includes(val));
      if (citiesInTheCountry.length > 0) accumulator.push({ ...countryObject, cities: citiesInTheCountry })
      return accumulator;
    }, []);
  }


}

---

这是给你的裁判的一封信

---

我应该检查一下你的stackblitz，在你的特殊情况下：

res=this.arr.map(e=>({...e, cities: e.cities.filter(city => city.toLowerCase().indexOf(val.toLowerCase()) > -1)}))

---

我应该检查一下你的stackblitz，在你的特殊情况下：

res=this.arr.map(e=>({...e, cities: e.cities.filter(city => city.toLowerCase().indexOf(val.toLowerCase()) > -1)}))

---

如果我开始输入I，那么所有城市都开始/拥有I。使用第一个字母或中间字母过滤不是问题，我会处理，问题是使用map（）和filter（）返回数组中未显示的数组如果我开始键入I，然后所有城市开始/拥有I。使用第一个字母或中间字母过滤不是问题，我将处理，问题是使用map（）和filter（）返回数组中未显示在HTMLEMS完美答案中的数组，如果将此逻辑放入某种自定义管道中会更好：）使用输入值的管道将是不纯净的管道，我建议不要这样做。获取错误“类型“{'country'：string；'cities'：string[]；}[]”上不存在属性'valueChanges'。这似乎是一个完美的答案，如果您将此逻辑放入某种自定义管道中会更好：）使用输入值的管道将是不纯净的管道，我建议您不要这样做。获取错误“Property'valueChanges'在类型“{'country'：string；'cities'：string[]；}[]”上不存在。我比较喜欢使用filter（）、map（）或reduce（）的简短解决方案您的函数“filterByRayMethods（）”就是我一直在寻找的一种解决方案，它使用map（）和filter（）链接在一起。这能实现吗？@UdG我已经用

reduce

更新了我的答案和StackBlitz，如果这是你想要的。我接受了上面的一个，因为它满足了我的要求。但您的答案也值得一看，我将保留它作为其他用例的参考。thanxI正在寻找一个使用filter（）、map（）或reduce（）的简短解决方案，无论使用哪种方法。您的函数“FilterByrayMethods（）”就是我正在寻找的那种将map（）和filter（）链接在一起的解决方案。这能实现吗？@UdG我已经用

reduce

更新了我的答案和StackBlitz，如果这是你想要的。我接受了上面的一个，因为它满足了我的要求。但您的答案也值得一看，我将保留它作为其他用例的参考。thanxIt确实返回值，但country属性不必要地显示。我能不能只看城市，别的什么都不看。删除了排列运算符，它按要求工作。它确实返回值，但不必要地显示country属性。我能不能只看城市，别的什么都不看。拆下摊铺机并按要求工作