vue后端返回的接口中怎么取出数据是 数组中嵌套数组 数组里面是对象 js实现
时间: 2024-02-27 07:53:37 浏览: 115
如果你的后端接口返回的数据是一个数组,而且这个数组中嵌套了其他的数组,且这个数组里面是对象,那么你可以通过以下方式来取出数据:
假设你的返回数据长这样:
```javascript
const data = [
{
id: 1,
name: '张三',
hobbies: [
{ id: 1, name: '篮球' },
{ id: 2, name: '游泳' },
{ id: 3, name: '跑步' }
]
},
{
id: 2,
name: '李四',
hobbies: [
{ id: 4, name: '唱歌' },
{ id: 5, name: '跳舞' }
]
}
];
```
那么你可以使用 `forEach` 或者 `map` 方法来遍历这个数组,然后在遍历过程中使用嵌套的 `forEach` 方法遍历嵌套的数组中的对象:
```javascript
// 使用 forEach 方法遍历数组和嵌套数组中的对象
data.forEach(person => {
console.log(`${person.name} 的兴趣爱好:`);
person.hobbies.forEach(hobby => {
console.log(hobby.name);
});
});
// 使用 map 方法将每个对象的 hobbies 数组转换成一个新的数组
const hobbiesList = data.map(person => person.hobbies.map(hobby => hobby.name));
console.log(hobbiesList); // [['篮球', '游泳', '跑步'], ['唱歌', '跳舞']]
```
在这个例子中,我们首先使用 `forEach` 或者 `map` 方法遍历 `data` 数组,然后在遍历过程中使用嵌套的 `forEach` 方法遍历每个人的 `hobbies` 数组中的对象。这样就可以取出所有的数据了。
阅读全文