使用 Javascript 过滤嵌套数组答案

【问题标题】：filter nested array with Javascript使用 Javascript 过滤嵌套数组
【发布时间】：2020-04-21 19:22:51
【问题描述】：

有一个包含对象的数组和一个选项数组如何按键值过滤内部对象数组？

下面是一个例子：

let test = [{
  "options": [{
     "label": "Audi",
     "value": 10
   },
    {
     "label": "BMW",
     "value": 18
   },
   {
     "label": "Mercedes Benz",
     "value": 116
   },
   {
     "label": "VW",
     "value": 184
   }
 ],
 "label": "test1"
},
{
 "options": [{
    "label": "Adler",
    "value": 3664
  },
  {
    "label": "Alfa Romeo",
    "value": 3
  },
  {
    "label": "Alpine",
    "value": 4
  }
],
 "label": "test2"
}
]

我如何取回对象：

 {
   "label": "Audi",
   "value": 10
 }

如果我用关键字Audi过滤

return label.toLowerCase().includes(inputValue.toLowerCase());

我尝试了以下

test.map((k) => {
              res = k.options.filter((j) => {
                inputValue.toLowerCase();
                if (j.label.toLowerCase().includes(inputValue.toLowerCase())) {
                  return j;
                }
              });
            });

【问题讨论】：

filter() 用于创建一个包含满足条件的元素的新数组。如果要返回满足条件的元素，请使用find()。
你没有返回res。

标签： javascript arrays object filter keyword

【解决方案1】：

你需要返回filter()的结果，而不是仅仅把它赋值给一个变量，这样map()就会返回结果。

let test = [{
    "options": [{
        "label": "Audi",
        "value": 10
      },
      {
        "label": "BMW",
        "value": 18
      },
      {
        "label": "Mercedes Benz",
        "value": 116
      },
      {
        "label": "VW",
        "value": 184
      }
    ],
    "label": "test1"
  },
  {
    "options": [{
        "label": "Adler",
        "value": 3664
      },
      {
        "label": "Alfa Romeo",
        "value": 3
      },
      {
        "label": "Alpine",
        "value": 4
      }
    ],
    "label": "test2"
  }
]
let inputValue = "audi";
let search = inputValue.toLowerCase();
let result = test.map(k => k.options.filter(j => j.label.toLowerCase().includes(search)));
console.log(result);

【讨论】：

非常感谢，它可以工作，我只需要为我的用例连接结果！

【解决方案2】：

这将返回匹配搜索查询的所有选项：

function find(array, query) {
  return array.reduce((prev, current) => prev.concat(current.options), []).filter(item => item.label.includes(query))
}

find(test, 'Audi')

【讨论】：

【解决方案3】：

使用flatMap()，后跟filter()：

let test=[{options:[{label:"Audi",value:10},{label:"BMW",value:18},{label:"Mercedes Benz",value:116},{label:"VW",value:184}],label:"test1"},{options:[{label:"Adler",value:3664},{label:"Alfa Romeo",value:3},{label:"Alpine",value:4}],label:"test2"}]

let result = test.flatMap(el => {
    return el.options.filter(car => car.label == "Audi")
})[0]

console.log(result)

【讨论】：

【解决方案4】：

遍历数组时需要深入两层。

function filterArray(needle, haystack) {
  return haystack
    .map(h => h.options)
    .flatMap(h => h )
    .filter(h => h.label.toLowerCase().includes(needle.toLowerCase()));

CodeSandbox

【讨论】：

感谢您向我展示flatMap()，不知道存在！

【解决方案5】：

这可能会影响你的答案：

console.log(test[0].options[0]);

【讨论】：