js中如何筛选显示json

JavaScript中如何高效筛选并显示JSON数据

在Web开发中,JSON（JavaScript Object Notation）作为轻量级的数据交换格式，被广泛应用于前后端数据交互，而筛选并显示JSON数据是前端开发的常见需求——例如从用户列表中筛选特定年龄段的用户、从商品库中过滤价格低于某个阈值的商品，或根据搜索关键词匹配文章标题，本文将详细介绍JavaScript中筛选JSON数据的多种方法，从基础到进阶，并结合实际场景展示如何高效处理和显示结果。

理解JSON数据结构

在开始筛选之前,需要明确JSON数据的基本结构，JSON数据通常有两种形式：

• 对象（Object）：用 表示，键值对集合，如 {"name": "张三", "age": 25, "city": "北京"}。
• 数组（Array）：用 [] 表示，有序值列表，如 [{"name": "李四", "age": 30}, {"name": "王五", "age": 22}]。

实际开发中,JSON数据多为对象数组（如用户列表、商品列表），因此本文重点讲解数组数据的筛选方法。

基础筛选方法：数组的filter()方法

filter()是JavaScript数组原型上的核心方法，用于创建一个新数组，其包含通过所提供函数实现的测试的所有元素，该方法不会修改原数组，适合筛选操作。

基本语法

const newArray = oldArray.filter(callback(element, index, array) => {
  // 返回true保留元素，false过滤掉
});

• element：当前正在处理的元素。
• index：可选，当前元素的索引。
• array：可选，调用filter()的原数组。

实际案例：筛选年龄大于25的用户

假设有以下JSON数据：

const users = [
  { id: 1, name: "张三", age: 25, city: "北京" },
  { id: 2, name: "李四", age: 30, city: "上海" },
  { id: 3, name: "王五", age: 22, city: "广州" },
  { id: 4, name: "赵六", age: 28, city: "深圳" }
];

筛选年龄大于25的用户：

const adults = users.filter(user => user.age > 25);
console.log(adults);
// 输出：[{ id: 2, name: "李四", age: 30, city: "上海" }, { id: 4, name: "赵六", age: 28, city: "深圳" }]

多条件筛选：结合逻辑运算符

如果需要同时满足多个条件（如年龄大于25且所在城市为上海），可以使用&&（与）或（或）：

const shanghaiAdults = users.filter(user => user.age > 25 && user.city === "上海");
console.log(shanghaiAdults);
// 输出：[{ id: 2, name: "李四", age: 30, city: "上海" }]

模糊匹配：筛选包含关键词的数据

对于字符串类型的字段（如姓名、城市），可以使用String.prototype.includes()方法实现模糊匹配，例如筛选姓名包含“三”的用户：

const userWithSan = users.filter(user => user.name.includes("三"));
console.log(userWithSan);
// 输出：[{ id: 1, name: "张三", age: 25, city: "北京" }]

进阶筛选：结合find()与some()方法

除了filter()，JavaScript还提供了其他数组方法，适用于不同的筛选场景。

find()：查找第一个匹配元素

filter()返回所有匹配元素，而find()仅返回第一个匹配的元素（若未找到则返回undefined），适合“查找单个目标”的场景，例如根据ID查找用户：

const userById = users.find(user => user.id === 3);
console.log(userById);
// 输出：{ id: 3, name: "王五", age: 22, city: "广州" }

some()：判断是否存在匹配元素

some()用于测试数组中是否至少有一个元素通过函数测试，返回布尔值（true/false），适合“是否存在”的判断，例如是否存在年龄小于20的用户：

hasTeenager = users.some(user => user.age < 20);
console.log(hasTeenager); // 输出：false

every()：判断是否所有元素都匹配

every()用于测试数组中是否所有元素都通过函数测试，返回布尔值，例如判断是否所有用户都大于20岁：

allAdults = users.every(user => user.age > 20);
console.log(allAdults); // 输出：true

复杂筛选：嵌套JSON与多级条件

实际开发中,JSON数据可能包含嵌套结构（如对象中的对象、数组中的数组），此时需要逐层访问属性，结合逻辑运算符实现复杂筛选。

筛选嵌套对象数据

假设有以下嵌套JSON数据（用户包含“订单”信息）：

const usersWithOrders = [
  { 
    id: 1, 
    name: "张三", 
    age: 25, 
    orders: [
      { id: "A1", amount: 100, status: "completed" },
      { id: "A2", amount: 200, status: "pending" }
    ] 
  },
  { 
    id: 2, 
    name: "李四", 
    age: 30, 
    orders: [
      { id: "B1", amount: 150, status: "completed" }
    ] 
  }
];

筛选“有已完成订单且订单金额大于100”的用户：

const qualifiedUsers = usersWithOrders.filter(user => 
  user.orders.some(order => 
    order.status === "completed" && order.amount > 100
  )
);
console.log(qualifiedUsers);
// 输出：[{ id: 1, name: "张三", age: 25, orders: [...] }]

动态条件筛选：根据用户输入灵活筛选

有时筛选条件需要动态生成（如通过表单输入），此时可以将条件封装为对象，结合reduce()或动态函数实现，例如根据用户输入的“最小年龄”和“城市”筛选：

const filterConditions = {
  minAge: 25,
  city: "上海"
};
const dynamicFilter = users.filter(user => 
  user.age >= filterConditions.minAge && 
  user.city === filterConditions.city
);
console.log(dynamicFilter);
// 输出：[{ id: 2, name: "李四", age: 30, city: "上海" }]

筛选后的数据渲染：将JSON数据显示到页面

筛选JSON数据的核心目的是在页面上展示结果，结合DOM操作或前端框架（如Vue、React），可以实现数据的动态渲染。

原生JavaScript：DOM操作渲染

假设HTML中有容器<div id="userList"></div>，通过document.createElement动态生成元素并插入：

function renderUsers(users) {
  const container = document.getElementById("userList");
  container.innerHTML = ""; // 清空容器
  users.forEach(user => {
    const userCard = document.createElement("div");
    userCard.className = "user-card";
    userCard.innerHTML = `
      <h3>${user.name}</h3>
      <p>年龄：${user.age}</p>
      <p>城市：${user.city}</p>
    `;
    container.appendChild(userCard);
  });
}
// 筛选后渲染
const filteredUsers = users.filter(user => user.age > 25);
renderUsers(filteredUsers);

使用模板字符串优化HTML结构

通过模板字符串（`）可以更清晰地拼接HTML，避免字符串拼接的混乱：

const userCard = `
  <div class="user-card">
    <h3>${user.name}</h3>
    <p>年龄：${user.age} | 城市：${user.city}</p>
  </div>
`;

前端框架渲染（以Vue为例）

使用Vue的v-for指令可以轻松遍历数组并渲染数据，结合计算属性（computed）实现响应式筛选：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索用户名..." />
    <div v-for="user in filteredUsers" :key="user.id" class="user-card">
      <h3>{{ user.name }}</h3>
      <p>年龄：{{ user.age }} | 城市：{{ user.city }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {