微信小程序js里data数据里有一个数组对象,界面for循环展示部门名称,计算一个相同的部门名称次数,设值并且显示到界面上
时间: 2024-02-06 10:10:28 浏览: 106
假设数组对象为`departmentList`,每个对象中有一个`name`属性表示部门名称,可以按照以下步骤计算并显示部门名称次数:
1. 定义一个空对象`countMap`,用于存储部门名称和出现次数的键值对。
2. 遍历`departmentList`数组,对于每个对象,获取其`name`属性值作为键,判断`countMap`中是否已存在该键。如果存在,则将其对应的值加1;否则,将该键值对添加到`countMap`中,初始值为1。
3. 将`countMap`对象转换为一个数组`countList`,其中每个元素为一个对象,包含`name`和`count`两个属性,分别表示部门名称和出现次数。
4. 将`countList`数组赋值给页面数据的一个变量,通过`wx:for`指令和`{{ }}`语法在页面上进行展示。
下面是完整的代码示例:
```
// 在Page函数中定义数据和计算部门名称次数的函数
Page({
data: {
departmentList: [
{ name: '部门A' },
{ name: '部门B' },
{ name: '部门A' },
{ name: '部门C' },
{ name: '部门B' },
{ name: '部门B' },
],
countList: [],
},
onLoad: function () {
this.calcDepartmentCount();
},
calcDepartmentCount: function () {
var countMap = {};
for (var i = 0; i < this.data.departmentList.length; i++) {
var name = this.data.departmentList[i].name;
if (countMap[name]) {
countMap[name]++;
} else {
countMap[name] = 1;
}
}
var countList = [];
for (var name in countMap) {
countList.push({ name: name, count: countMap[name] });
}
this.setData({ countList: countList });
},
})
```
在页面的`<view>`标签中使用`wx:for`指令和`{{ }}`语法展示部门名称和出现次数:
```
<view wx:for="{{countList}}">
<text>部门名称:{{item.name}}</text>
<text>出现次数:{{item.count}}</text>
</view>
```
阅读全文