后端数据格式与前端组件要求格式不匹配的解决方案

在日常应用开发过程中，经常遇到后端 api 接口输出的数据格式与前端组件要求的数据格式不一样的情况，我们可以通过数据转换来解决这个问题，详解下面的代码 :

示例代码 ：

<template>
	<view class="gui-padding">
		<view class="gui-margin-top">
			<picker 
			@change="bindPickerChange" 
			:value="pickerIndex" 
			:range="pickerArray">
				<view>{{pickerArray[pickerIndex]}}</view>
			</picker>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			pickerArray : [], 
			pickerIndex : 0,
			apiData     : []
		}
	},
	onReady: function (options) {
		//模拟api 请求
		setTimeout(()=>{
			// 假设 api 返回的数据格式如下:
			var apiData = [{id:0, name:"全部"}, {id:1, name:"男"}, {id:2, name:"女"}];
			this.apiData = apiData;
			// 而 picker 组件需要的格式为 ['全部', '男', '女']
			// 解决方案 : 遍历 api 数据并转换为 picker 要求的形式
			var pickerData = [];
			for(let i = 0; i < apiData.length; i++){
				pickerData.push(apiData[i].name);
			}
			this.pickerArray = pickerData;
		}, 300);
	},
	methods: {
		bindPickerChange : function (e) {
			console.log(e);
			// 选择索引
			this.pickerIndex = e.detail.value;
			// 对应选择的 api 数据
			console.log(this.apiData[this.pickerIndex]);
			// api 数据名称， 获取id 则 .id 即可
			console.log(this.apiData[this.pickerIndex].name);
			// 对应选择的转换后的 picker 数据
			console.log(this.pickerArray[this.pickerIndex]);
		}
	}
}
</script>
<style>
</style>