javascript - 如何从具有 2 个级别的 json 中搜索值作为来自两个对象的返回匹配项？

Question

我有一个对象数组，它有一个内部数组，需要过滤并根据两者的匹配返回数组。搜索是(输入)事件，它在每次按键时执行。
stackblitz 链接 stackblitz

 list = [
          {
            id: 'abc',
            data: [
              { key: '1', value: 'car' },
              { key: '2', value: 'bus' },
              { key: '3', value: 'bike' },
              { key: '4', value: 'truck' },
              { key: '5', value: 'jeep' },
            ],
          },
          {
            id: 'def',
            data: [
              { key: '1', value: 'car' },
              { key: '2', value: 'bicycle' },
              { key: '3', value: 'train' },
              { key: '4', value: 'aeroplane' },
              { key: '5', value: 'jeep' },
            ],
          },
        ];
 handleSearch = (event) => {
    if (event.target.value.length > 0) {
      const item = this.list[0].data.filter((items) =>
        items.value.toLowerCase().includes(event.target.value.toLowerCase())
      );
      this.list[0].data = item;
    } else {
      this.list[0].data = this.orgList;
    }
  };

期待输出

input = car

output = [
  {
    id: 'abc',
    data: [
      { key: '1', value: 'car' },
    ],
  },
  {
    id: 'def',
    data: [
      { key: '1', value: 'car' },
    ],
  },
];

input = truck

output = 
[
  {
    id: 'abc',
    data: [
      { key: '4', value: 'truck' },
    ],
  },
];

Answer 1

const list = [{id: 'abc',data: [{ key: '1', value: 'car' },{ key: '2', value: 'bus' },{ key: '3', value: 'bike' },{ key: '4', value: 'truck' },{ key: '5', value: 'jeep' },],},{id: 'def',data: [{ key: '1', value: 'car' },{ key: '2', value: 'bicycle' },{ key: '3', value: 'train' },{ key: '4', value: 'aeroplane' },{ key: '5', value: 'jeep' },],},];


function search(arr, searchVal) {
    return arr.map((item) => {
        const data = item.data.filter(({ value }) => value === searchVal);
        return { ...item, data };
      })
      .filter(({ data }) => data.length);
}


console.log(search(list, 'car'));
console.log(search(list, 'truck'));

.as-console-wrapper { max-height: 100% !important; top: 0 }

Angular demo