案例：

數據如下：

{success: true, code: 10000, data: {…}, message: "執行成功"} code: 10000 data:list: Array(7)0: {_id: "608b70ecf9d99a7594662466", id: "0", label: "熱榜"}1: {_id: "608b70ecf9d99a7594662467", id: "1", label: "前端"}2: {_id: "608b70ecf9d99a7594662468", id: "2", label: "JAVA"}3: {_id: "608b70ecf9d99a7594662469", id: "3", label: "PHP"}4: {_id: "608b70ecf9d99a759466246a", id: "4", label: "Python"}5: {_id: "608b70ecf9d99a759466246b", id: "5", label: "程序人生"}6: {_id: "608b70ecf9d99a759466246c", id: "6", label: "數據庫"} length: 7 nv_length: (...) __proto__: Array(0) __proto__: Object message: "執行成功" success: true __proto__: Object

返回的數據都在res的data標簽的list數組中，其他外測數據節點不需要

可以進行數據解構：
將后端返回的數據局中把data結構出來并賦值給res變量，然后從res.list就可以獲取數據

這是解構出來的數據

真實場景案例：

<template><view class="hot-container"><view v-for="(item, index) in tabData" :key="index">{{ item.label }} - {{ index }}</view></view> </template><script> import { getHotTabs } from 'api/hot'; export default {data() {return {tabData: [],};},// 組件實例配置完成，但是DOM尚未渲染，進行網絡請求，配置響應數據created() {this.loadHotTabs();},methods: {/*** 獲取熱搜標題數據*/async loadHotTabs() {// uniapp 支持 async awaitconst { data: res } = await getHotTabs();this.tabData = res.list;console.log('res', res);console.log('res', res.list);},}, }; </script><style lang="scss"></style>

總結

以上是生活随笔為你收集整理的前端数据解构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。