如何通过URL从嵌套对象数组获取对象，实现Axios与json-server交互？

json-server本身是为扁平的REST风格资源设计的，直接操作嵌套数组数组会有局限，下面是两种可行的处理方式：

1. 调整数据结构（推荐） #

把嵌套的数组结构改成带关联标识的扁平结构，这是最符合json-server设计理念的方式。比如把原本的嵌套员工组拆成独立的employeeGroups资源，和employees关联：

// db.json
{
  "employees": [
    { "id": 1, "name": "张三", "groupId": 1 },
    { "id": 2, "name": "李四", "groupId": 1 },
    { "id": 3, "name": "王五", "groupId": 2 }
  ],
  "employeeGroups": [
    { "id": 1, "name": "研发一组" },
    { "id": 2, "name": "测试一组" }
  ]
}

这样就能用标准的REST操作完成所有需求：

• GET某组员工：axios.get("http://localhost:4000/employees?groupId=1")
• POST新增员工：axios.post("http://localhost:4000/employees", { name: "赵六", groupId: 1 })
• PUT/PATCH修改员工：axios.patch("http://localhost:4000/employees/1", { name: "张三_更新" })
• DELETE删除员工：axios.delete("http://localhost:4000/employees/1")

这种方式不需要额外处理嵌套，json-server原生支持查询参数、关联查询，请求次数也少。

2. 保留原嵌套结构的处理方式 #

如果必须保留employees是数组嵌套数组的结构，只能把整个employees作为单一资源处理：

获取嵌套数据 #

先获取完整的employees数组，在前端提取需要的嵌套对象：

const getTargetEmployee = () => {
  axios.get("http://localhost:4000/employees")
  .then((resp) => {
    // 示例：取出第一个子数组的第二个对象
    const target = resp.data[0][1];
    console.log(target);
  })
  .catch(error => console.log(error));
};

新增/修改/删除嵌套数据 #

先获取完整数据，在前端修改嵌套结构，再把整个数组PUT回服务器：

const updateNestedEmployee = () => {
  axios.get("http://localhost:4000/employees")
  .then(resp => {
    const updatedData = resp.data;
    // 修改嵌套数组里的目标对象
    updatedData[0][0].name = "更新后的姓名";
    // 或者新增子数组/对象
    updatedData.push([{ id: 4, name: "新员工" }]);
    // 把整个数组PUT回服务器
    return axios.put("http://localhost:4000/employees", updatedData);
  })
  .then(updateResp => console.log("更新成功", updateResp.data))
  .catch(error => console.log(error));
};

注意 #

• json-server不支持通过URL路径（比如/employees/[[]]）直接访问嵌套数组的元素，路径参数只支持资源的ID
• 不要用forEach发多个请求，一次性获取/更新整个资源更高效，也符合json-server的资源处理逻辑

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