如何使用REST API从json-server获取指定嵌套JSON数据?
问题根源说明
首先你之前的请求未生效,核心原因是两点:
- 你当前托管的JSON顶层仅包含
data键,对应的值是普通对象而非数组,不符合json-server的标准REST资源设计逻辑 - json-server的查询过滤参数(如
?xxx=yyy)仅支持筛选数组类型的集合资源,当目标资源是普通对象时,查询参数不会触发过滤逻辑,会直接返回整个资源对象
可行解决方案
方案1:调整JSON结构适配原生查询逻辑(推荐)
json-server原生过滤能力仅对数组类型的资源生效,你可以把原本嵌套在data.program下的训练日数据调整为顶层数组结构,给每个训练日添加dayName标识字段,示例结构如下:
{ "user": [{"username": "Pedro", "id":1 }], "program": [ { "dayName": "Day 1", "content": [ { "muscleGroup": "Chest", "warmUp": ["parallel bar dips"], "main": ["Bench Press", "Inclined Bench press", "Decline Bench press"], "secondary": ["Dumbbell Flys", "Cable Crossover Flys", "Pec-deck Fly"] }, { "muscleGroup": "Biceps", "main": ["Barbell Curl", "Preacher Curl"], "secondary": ["Hammer Curls", "Cable Curl", "Dumbbell Curl"] } ] }, { "dayName": "Day 2", "content": [ { "muscleGroup": "Shoulders", "warmUp": ["parallel bar dips"], "main": ["Bench Press", "Inclined Bench press", "Decline Bench press"], "secondary": ["Dumbbell Flys", "Cable Crossover Flys", "Pec-deck Fly"] }, { "muscleGroup": "Abs", "main": ["Crunch", "Leg raises"] } ] } ] }
调整后直接发起请求即可精准获取对应训练日内容:http://localhost:3004/program?dayName=Day%201
后续还可以直接复用json-server的分页、排序、模糊搜索等原生能力,扩展性更强。
方案2:自定义路由(无需修改原有JSON结构)
如果不想改动现有JSON结构,可以通过自定义路由配置定向映射嵌套路径:
- 新建配置文件
json-server.json,写入路由映射规则:{ "routes": { "/program/:dayName": "/data/program/:dayName" } } - 启动json-server时加载该配置文件,执行命令:
json-server --watch 你的JSON文件名.json --config json-server.json - 直接请求对应路径即可获取目标内容:
http://localhost:3004/program/Day%201
临时兜底方案
如果只是临时调试不想改动任何配置,可以先请求http://localhost:3004/data拿到全量数据,再在前端代码中提取data.program["Day 1"]字段的内容即可,这种方式不符合定向获取的需求,仅适合临时调试使用。
内容的提问来源于stack exchange,提问作者João Pedro
相关产品推荐
相关产品推荐

