微信小程序怎么解析json数组（微信小程序picker组件使用自定义json数组的绑定id问题）

微信小程序怎么解析json数组（微信小程序picker组件使用自定义json数组的绑定id问题）"id": 1 workArr: [{一、定义data数据data: { //用于picker展示的数据数组

在微信小程序中，当用户用到下拉选择菜单时，我们经常使用picker，不过picker有一个小问题，就是获取当前选中的值是数组的索引，同时令某一行选中，也是通过索引号传递实现的。目前我们经常使用的是数据库中的id来保存数据。所以需要在这里将微信picker组件中的value(数组索引号）换成我们真实数据中的id才好。

如下图我们表中“工种”这个数组，其实是包含id和title属性的。如果用户切换选择时，微信picker传递过来的是当前项在数组中的索引号，这里我们需要通过索引号查询到此元素的id也就是：this.data.workArr[e.detail.value].id这个代码实现。

然后为了保持当前项被选中，我们传递给picker的value仍然需要是索引号，所以我们定义了一个字段workInx来保存每次变化后的索引号：

在changeWork方法保存workInx 为当前索引的值。在xml布局文件中value="{{ workInx }}"代码实现对当前索引号位置的选中。

一、定义data数据

data: {

//用于picker展示的数据数组

workArr: [{

"id": 1

"title": "电工"

} {

"id": 2

"title": "瓦工"

} {

"id": 3

"title": "油工"

}

]

workId:0 //真实id（当前选择的工种id 用于传递到后台）

workInx:0//picker当前选中的索引位置

}

//picker切换选择的处理方法

changeWork: function (e) {

console.log(e);

this.setData({

' workId ': this.data.workArr[e.detail.value].id

'workInx': e.detail.value

})

}

前端xml

<view class="centerPage-info-item">

<label>工种</label>

<label class="ico-moon icon-rightarrow"></label>

<picker mode="selector" class="centerPage" bindchange="changeWork" value="{{ workInx }}" range="{{ workArr }}" range-key="title">

<view class="picker">{{ workArr[workInx].title }}</view>

</picker>

</view>