如何在JSON文件中筛选特定type类型的数据并在页面展示？

以下是几种主流前端场景下的实现方案，按需选择即可：

一、原生JavaScript实现 #

适合纯静态页面，无需框架支持：

// 修正变量名大小写后的原始数据
const mediaList = [
    {
        "id": "001",
        "name": "The Boys",
        "date": "2022",
        "genre": "Comedy",
        "type": "series"
    }, {
        "id": "002",
        "name": "Money Heist",
        "date": "2020",
        "genre": "Action",
        "type": "series"
    }, {
        "id": "003",
        "name": "John Wick",
        "date": "2022",
        "genre": "Action",
        "type": "movie"
    }
];

// 筛选出type为"series"的数据
const seriesOnly = mediaList.filter(item => item.type === "series");

// 获取页面中用于展示数据的容器
const container = document.getElementById("media-container");

// 动态生成HTML并渲染到页面
seriesOnly.forEach(item => {
    const card = document.createElement("div");
    card.style.border = "1px solid #eee";
    card.style.padding = "1rem";
    card.style.marginBottom = "1rem";
    card.innerHTML = `
        <h3>${item.name}</h3>
        <p>年份: ${item.date}</p>
        <p>类型: ${item.genre}</p>
        <hr>
    `;
    container.appendChild(card);
});

对应的HTML结构：

<div id="media-container"></div>

二、Vue 3实现 #

适合使用Vue框架的项目：

<template>
  <div class="media-list">
    <div v-for="item in filteredSeries" :key="item.id" class="media-card">
      <h3>{{ item.name }}</h3>
      <p>年份: {{ item.date }}</p>
      <p>类型: {{ item.genre }}</p>
    </div>
  </div>
</template>

<script setup>
const mediaList = [
    {
        "id": "001",
        "name": "The Boys",
        "date": "2022",
        "genre": "Comedy",
        "type": "series"
    }, {
        "id": "002",
        "name": "Money Heist",
        "date": "2020",
        "genre": "Action",
        "type": "series"
    }, {
        "id": "003",
        "name": "John Wick",
        "date": "2022",
        "genre": "Action",
        "type": "movie"
    }
];

// 计算属性筛选数据（也可以直接用变量，计算属性适合数据动态变化的场景）
const filteredSeries = mediaList.filter(item => item.type === "series");
</script>

<style scoped>
.media-card {
  border: 1px solid #eee;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}
</style>

三、React函数组件实现 #

适合使用React框架的项目：

import React from 'react';

const MediaList = () => {
  const mediaList = [
    {
        "id": "001",
        "name": "The Boys",
        "date": "2022",
        "genre": "Comedy",
        "type": "series"
    }, {
        "id": "002",
        "name": "Money Heist",
        "date": "2020",
        "genre": "Action",
        "type": "series"
    }, {
        "id": "003",
        "name": "John Wick",
        "date": "2022",
        "genre": "Action",
        "type": "movie"
    }
  ];

  const filteredSeries = mediaList.filter(item => item.type === "series");

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      {filteredSeries.map(item => (
        <div 
          key={item.id}
          style={{
            border: '1px solid #eee',
            padding: '1rem',
            marginBottom: '1rem',
            borderRadius: '4px'
          }}
        >
          <h3>{item.name}</h3>
          <p>年份: {item.date}</p>
          <p>类型: {item.genre}</p>
        </div>
      ))}
    </div>
  );
};

export default MediaList;

内容的提问来源于stack exchange，提问作者Kobs