使用 Angular 过滤 JSON 数据：根据 ID 匹配筛选

本文介绍了在 angular 项目中，如何利用 JavaScript 的 Array.prototype.Filter() 和 Array.prototype.some() 方法，根据一个 json 数组（包含 ID）来过滤另一个 JSON 数组，从而提取出匹配 ID 的记录。通过本文提供的示例代码，你可以轻松地在你的 Angular 应用中实现类似的数据筛选功能。

在 Angular 应用中，经常需要处理 JSON 数据。有时，我们需要根据一个 JSON 数组中的 ID，从另一个 JSON 数组中筛选出对应的记录。 本文将介绍如何使用 JavaScript 的 Array.prototype.filter() 和 Array.prototype.some() 方法来实现这一功能。

核心方法：filter() 和 some()

Array.prototype.filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。 它接受一个回调函数作为参数，该回调函数对数组中的每个元素执行。如果回调函数返回 true，则该元素会被包含在新数组中；否则，该元素会被排除。

Array.prototype.some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。 它也接受一个回调函数作为参数，该回调函数对数组中的每个元素执行。如果回调函数对数组中的任何一个元素返回 true，则 some() 方法返回 true；否则，返回 false。

实现步骤

假设我们有两个 JSON 数组：jsonA 包含完整的车辆记录，jsonB 包含需要筛选的 ID 列表。我们的目标是从 jsonA 中筛选出 jsonB 中存在的 ID 对应的车辆记录。

以下是实现代码：

const jsonA = [   { id: 100, brand: 'Tes1', vname: 'Testname1' },   { id: 200, brand: 'Tes2', vname: 'Testname2' },   { id: 300, brand: 'Tes3', vname: 'Testname3' }, ];  const jsonB = [   { id: 100 },   { id: 300 }, ];  const filteredData = jsonA.filter((itemA) =>   jsonB.some((itemB) => itemB.id === itemA.id) );  console.log(filteredData);

代码解释：

1. jsonA.filter((itemA) => …): 使用 filter() 方法遍历 jsonA 数组，对每个元素（itemA）执行回调函数。
2. jsonB.some((itemB) => itemB.id === itemA.id): 对于 jsonA 中的每个元素 itemA，使用 some() 方法遍历 jsonB 数组，检查是否存在 itemB 的 id 与 itemA 的 id 相等。
3. 如果 jsonB 中存在与 itemA 的 id 匹配的元素，则 some() 方法返回 true，filter() 方法会将 itemA 包含在 filteredData 数组中。

注意事项

• 确保 jsonA 和 jsonB 中的 ID 字段名称一致，例如都使用 id。
• 如果 jsonB 数组很大，使用 Set 数据结构来存储 jsonB 的 ID，可以提高查找效率。 可以先将 jsonB 的 id 提取到 Set 中， 然后在 filter 中使用 Set.has() 方法来判断是否存在。

const idsB = new Set(jsonB.map(item => item.id));  const filteredData = jsonA.filter(itemA => idsB.has(itemA.id));  console.log(filteredData);

总结

通过结合使用 Array.prototype.filter() 和 Array.prototype.some() 方法，我们可以方便地在 Angular 应用中根据 ID 匹配筛选 JSON 数据。 这种方法简洁高效，能够满足大多数数据筛选需求。 对于大型数据集，可以考虑使用 Set 结构来优化性能。