如何通过URL参数筛选JSON数据？当前id参数筛选失效

静态JSON文件直接通过浏览器访问时，服务器只会返回完整文件内容，不会自动解析URL参数做筛选。要实现/stories?id=2返回对应id的数据，需要添加处理逻辑，分后端和前端两种方案：

后端处理方案（推荐，适合API场景） #

Node.js + Express 示例 #

1. 先安装依赖：npm install express
2. 创建服务器脚本（比如server.js）：

const express = require('express');
const fs = require('fs');
const app = express();

app.get('/stories', (req, res) => {
  fs.readFile('./stories.json', 'utf8', (err, data) => {
    if (err) return res.status(500).json({ error: '读取文件失败' });
    
    const storiesData = JSON.parse(data);
    const storyId = req.query.id;

    if (storyId) {
      const filtered = storiesData.stories.filter(story => story.id === parseInt(storyId));
      res.json({ stories: filtered });
    } else {
      res.json(storiesData);
    }
  });
});

app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));

3. 启动服务器后，访问http://localhost:3000/stories?id=2就能得到id为2的故事数据。

Python Flask 示例 #

1. 安装依赖：pip install flask
2. 创建服务器脚本（比如app.py）：

from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/stories')
def get_stories():
    with open('stories.json', 'r', encoding='utf-8') as f:
        stories_data = json.load(f)
    
    story_id = request.args.get('id')
    if story_id:
        filtered = [s for s in stories_data['stories'] if s['id'] == int(story_id)]
        return jsonify({'stories': filtered})
    return jsonify(stories_data)

if __name__ == '__main__':
    app.run(debug=True)

3. 启动后访问http://localhost:5000/stories?id=2即可生效。

前端处理方案（适合纯静态页面场景） #

如果不想搭建后端，可以在前端页面加载JSON后，自行解析URL参数筛选数据：

<!DOCTYPE html>
<html>
<head>
    <title>故事列表</title>
</head>
<body>
    <div id="story-list"></div>

    <script>
        // 获取URL中的id参数
        const urlParams = new URLSearchParams(window.location.search);
        const targetId = urlParams.get('id');

        // 加载并筛选JSON数据
        fetch('stories.json')
            .then(res => res.json())
            .then(data => {
                let stories = data.stories;
                if (targetId) {
                    stories = stories.filter(story => story.id === parseInt(targetId));
                }
                // 渲染结果到页面
                const list = document.getElementById('story-list');
                stories.forEach(story => {
                    const item = document.createElement('div');
                    item.innerHTML = `<h2>${story.title}</h2><p>${story.subtitle || '无副标题'}</p>`;
                    list.appendChild(item);
                });
            })
            .catch(err => console.error('加载失败:', err));
    </script>
</body>
</html>

把这个HTML文件和stories.json放在同一目录，访问页面地址?id=2就能看到筛选后的结果。

注意事项 #

• JSON中的id是数字类型，URL参数是字符串，必须做类型转换后再匹配，否则会筛选失败
• 后端方案更适合做API接口，前端方案仅适合纯静态展示场景

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