微信小程序或普通js如何解析数组数据并显示(自动获取指定map的key的名称和value值)

一、数组数据的模板样式

shuzu:[{"香蕉1":"123"},{"香蕉2":"456"},....}]

二、普通JS遍历获取数组中的每个key和value

key的名称获取   Object.keys(shuzu)[i] --- i就是获取下标为多少的对象对应的key的名称
value值获取   shuzu[获取的key]

-------------------------------------------------------------------------------
var sensorKey = Object.keys(sensorData)[0];
var sensorVal = sensorData[sensorKey];

三、微信小程序获取对应的key名称和值进行显示操作

<view wx:for="{{shuzu}}" wx:for-index="key" wx:for-item="value">
最后代码如下:
<view >{{index}} -- {{item}}</view>
    </view>
</view>

当wx:for遍历对象时，wx:for-index会得到对象的key，wx:for-item会得到对象的value(有可能是嵌套数组，此时获取的就是对象了)

所以运行结果为：

0  [object]
1  [object]
2  [object]
3  [object]
.....

所以采取这种方式是不行了，借用普通js的处理方式，我们可以了解到，可以通过类似方式将数据进行解析，装上指定的key信息中。

由此

var keys = Object.keys(数组中的某一个对象)[0];//取到“香蕉1”
var values= 数组中的某一个对象[keys];//取到“香蕉1”对应的值“123”

存入指定的自定义构造中

var array = new Array();
----------------
//此项代码放于循环中
var info = {};
info["id"] = keys;
info["values"] = values;
array.push(info);

----------------
this.setData({
    页面显示需要的数组对象:array,
});

然后页面采取wx:for方式遍历显示(item.id、item.values)就可以啦