首页vue2中后端返回数组对象类型改造为数组嵌套数组嵌套对象

vue2中后端返回数组对象类型改造为数组嵌套数组嵌套对象

时间: 2025-01-13 17:59:15 浏览: 43

### 转换数组对象为复杂嵌套结构在 Vue2 项目中处理来自后端的数组对象并将其转换为目标格式——即数组内含数组再包裹对象的形式，可以采用 JavaScript 的高阶函数如 `map` 和解构赋值来完成这一操作。对于原始数据源是一个由多个对象组成的列表而言，目标是创建一个新的集合，其中每一项都是一个包含两个元素的小型数组：第一个元素可能是原对象的一个属性或整个对象本身；第二个则是另一个数组，该数组又包含了若干个键值对形式的对象。假设从服务器接收到如下 JSON 数组： ```json [ {"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"} ] ``` 期望得到的结果形似这样： ```javascript [ [ ["id", 1], [{"key": "name", "value": "Alice"}] ], [ ["id", 2], [{"key": "name", "value": "Bob"}] ] ] ``` 为了达到上述目的，在 Vue 组件的方法部分编写一段逻辑用于执行此变换过程[^1]： ```javascript // 假设这是从API获取的数据 const apiData = this.$store.state.userData; // 或者通过axios请求获得 let transformedData = apiData.map(item => { let innerArray = []; // 添加ID作为首个元素 innerArray.push(["id", item.id]); // 创建内部对象数组 let keyValuePairs = Object.keys(item).filter(key => key !== 'id').map(key => ({ key, value: item[key] })); // 将这些键值对放入第二层数组里 innerArray.push(keyValuePairs); return innerArray; }); ``` 这段代码首先遍历了传入的每个对象 (`item`) ，构建了一个新的二维数组，其中第一维保存的是 ID 及其对应的值，而第二维度则容纳了一系列描述其他字段及其对应值得对象。注意这里过滤掉了 id 字段以避免重复显示[^2]。

阅读全文