把数组按某个属性分类成对象或数组渲染页面

最新推荐文章于 2022-11-22 09:59:27 发布
最新推荐文章于 2022-11-22 09:59:27 发布
阅读量731 收藏 2
点赞数 1
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LzzMandy/article/details/107024906
版权

原数组如下：

sourceArr:[
  {month:"2020-6",id:"001",name:"lzz1"},
  {month:"2020-6",id:"002",name:"lzz2"},
  {month:"2020-6",id:"003",name:"lzz3"},
  {month:"2020-6",id:"004",name:"lzz4"},
  {month:"2020-5",id:"0011",name:"lzz11"},
  {month:"2020-5",id:"0012",name:"lzz12"},
  {month:"2020-5",id:"0013",name:"lzz13"},
  {month:"2020-5",id:"0014",name:"lzz14"}
]

把原数组按month进行分类，把2020-6、2020-5的分别合并，渲染到页面，显示如下：

两种方法：

方法1：把原数组转化成【对象】进行渲染

转化后的targetObj如下：

targetObj={
  "2020-6":[
    {month:"2020-6",id:"001",name:"lzz1"},
    {month:"2020-6",id:"002",name:"lzz2"},
    {month:"2020-6",id:"003",name:"lzz3"},
    {month:"2020-6",id:"004",name:"lzz4"}
  ],
  "2020-5":[
    {month:"2020-5",id:"0011",name:"lzz11"},
    {month:"2020-5",id:"0012",name:"lzz12"},
    {month:"2020-5",id:"0013",name:"lzz13"},
    {month:"2020-5",id:"0014",name:"lzz14"}
  ]
}

 源码：

<template>
  <view>

    <view class="item" v-for="(item,data) in targetObj" :key="data">
      <uni-section :title="data" type="line"></uni-section>
      <uni-list>
        <uni-list-item v-for="(item2,index) in item" :key="index" :title="item2.month" :badgeText="item2.name"
          :showArrow="false" :showBadge="true"></uni-list-item>
      </uni-list>
    </view>

  </view>
</template>

<script>
  import uniSection from '@/components/uni-section/uni-section.vue'
  import uniList from '@/components/uni-list/uni-list.vue'
  import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  export default {
    components: {
      uniSection,
      uniList,
      uniListItem
    },
    data() {
      return {
        targetObj: {
          "2020-6": [{month: "2020-6",id: "000",name: "lzz0"}],
        },
        sourceArr: [
          {month: "2020-6",id: "001",name: "lzz1"},
          {month: "2020-6",id: "002",name: "lzz2"},
          {month: "2020-6",id: "003",name: "lzz3"},
          {month: "2020-6",id: "004",name: "lzz4"},
          {month: "2020-5",id: "0011",name: "lzz11"},
          {month: "2020-5",id: "0012",name: "lzz12"},
          {month: "2020-5",id: "0013",name: "lzz13"},
          {month: "2020-5",id: "0014",name: "lzz14"}
        ]
      }
    },
    onLoad() {
      this.fromArrToObj()
    },
    methods: {
      fromArrToObj() {
        /* targetObj={
          "2020-6":[
            {month:"2020-6",id:"001",name:"lzz1"},
            {month:"2020-6",id:"002",name:"lzz2"},
            {month:"2020-6",id:"003",name:"lzz3"},
            {month:"2020-6",id:"004",name:"lzz4"}
          ],
          "2020-5":[
            {month:"2020-5",id:"0011",name:"lzz11"},
            {month:"2020-5",id:"0012",name:"lzz12"},
            {month:"2020-5",id:"0013",name:"lzz13"},
            {month:"2020-5",id:"0014",name:"lzz14"}
          ]
        */
        // 1 循环sourceArr每一条,判断targetObj[item.month]的值
        // -a 有值，追加
        // -b 无值，组合成新对象
        this.sourceArr.forEach(item => {
          let _month = item.month
          if (!this.targetObj[_month]) {
            this.targetObj[_month] = []
          }
          this.targetObj[_month].push(item)
        })
        console.log("this.targetObj===", this.targetObj);
      },
    }
  }
</script>

方法2：把原数组转化成新【数组】进行渲染

转化后的targetArr如下：

targetArr=[
  {
    month:"2020-6",
    data:[
      {month:"2020-6",id:"001",name:"lzz1"},
      {month:"2020-6",id:"002",name:"lzz2"},
      {month:"2020-6",id:"003",name:"lzz3"},
      {month:"2020-6",id:"004",name:"lzz4"}
    ]
  },
  {
    month:"2020-5",
    data:[
      {month:"2020-5",id:"0011",name:"lzz11"},
      {month:"2020-5",id:"0012",name:"lzz12"},
      {month:"2020-5",id:"0013",name:"lzz13"},
      {month:"2020-5",id:"0014",name:"lzz14"}
    ]
  }
]

源码：

<template>
  <view>

    <view class="item" v-for="(item,index) in targetArr" :key="index">
      <uni-section :title="item.month" type="line"></uni-section>
      <uni-list>
        <uni-list-item v-for="(item2,index2) in item.data" :key="index2" :title="item2.month" :badgeText="item2.name"
          :showArrow="false" :showBadge="true"></uni-list-item>
      </uni-list>
    </view>

  </view>
</template>

<script>
  import uniSection from '@/components/uni-section/uni-section.vue'
  import uniList from '@/components/uni-list/uni-list.vue'
  import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  export default {
    components: {
      uniSection,
      uniList,
      uniListItem
    },
    data() {
      return {
        targetArr:[
          {
            month:"2020-6",
            data:[{month:"2020-6",id:"000",name:"lzz0"}],
          },
        ],
        sourceArr: [
          {month: "2020-6",id: "001",name: "lzz1"},
          {month: "2020-6",id: "002",name: "lzz2"},
          {month: "2020-6",id: "003",name: "lzz3"},
          {month: "2020-6",id: "004",name: "lzz4"},
          {month: "2020-5",id: "0011",name: "lzz11"},
          {month: "2020-5",id: "0012",name: "lzz12"},
          {month: "2020-5",id: "0013",name: "lzz13"},
          {month: "2020-5",id: "0014",name: "lzz14"}
        ]
      }
    },
    onLoad() {
      this.fromArrToArr()
    },
    methods: {
      fromArrToArr() {
        /* targetArr=[
          {
            month:"2020-6",
            data:[
              {month:"2020-6",id:"001",name:"lzz1"},
              {month:"2020-6",id:"002",name:"lzz2"},
              {month:"2020-6",id:"003",name:"lzz3"},
              {month:"2020-6",id:"004",name:"lzz4"}
            ]
          },
          {
            month:"2020-5",
            data:[
              {month:"2020-5",id:"0011",name:"lzz11"},
              {month:"2020-5",id:"0012",name:"lzz12"},
              {month:"2020-5",id:"0013",name:"lzz13"},
              {month:"2020-5",id:"0014",name:"lzz14"}
            ]
          }
        ]
        */
        // 1 目标targetArr为空时，把sourceArr[0]作为第一条
        // 2 目标targetArr非空时，循环sourceArr每一条
          // -a 获取targetArr的最后一条的month值
          // -b 和sourceArr的每一条month做对比
            // -相同，则存进去
            // -不同，则追加
        this.sourceArr.forEach(item => {
          let lens = this.targetArr.length;
          if (lens == 0) {
            let one = {
              month: item.month,
              data: [item]
            };
            this.targetArr.push(one);
          } else {
            let _month = this.targetArr[lens - 1].month;
            if (_month == item.month) {
              this.targetArr[lens - 1].data.push(item);
            } else {
              let one = {
                month: item.month,
                data: [item]
              };
              this.targetArr.push(one);
            }
          }
        })
        console.log("this.targetArr===", this.targetArr);
      },
    }
  }
</script>

 

佛佛ง
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用数组的三种方法渲染页面
sword_chiu的博客
07-09 3808
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
vue调用数组_vue中使用对象数组的最佳实践
weixin_39783915的博客
12-21 1216
前言：在平常的开发中，经常会在vue中用到对象数组，如渲染一个小区的列表，数据结构可能如下所示：CommunityList: [{_id: '',community_code: '',community_name: '',...},...]当需要实现选择某几个小区加入收藏列表的时候，页面上往往需要增加el-checkbox来勾选，在数据结构上需要增加一个类似relation属性来标志该小区是否被选...
Vue 对象/数组 更新后 页面的渲染
yp875998926的博客
07-17 1399
用于解决v-for渲染的页面，更新了数组的元素，页面无法渲染更新后的数据 或者对象属性的添加导致的页面无法渲染到的问题 vue 视图更新（重新渲染页面） 方法：vue.set( target, propertyName/index, value ) 对象属性的添加 Vue.set(object, propertyName, value) target-vue对象 prop...
将现有数组重新分组(将数组分每四个渲染到一组)
QTFYING的博客
10-11 7873
最近做项目有一个小功能，将数组玩出了花样，就是要将ajax从后台拿到的数据，四个一组，渲染到页面上，特此记下笔记，以作安利： 首先，页面上建立一DOM节点：&lt;div id="test"&gt;&lt;/div&gt; 假如我们从后台拿到的数据结构为：var data = [1, 2, 3, 4, 5, 6, 7, 8, 9,10]; 接下来直接上代码： var result = [...
创建json数组与json数组渲染到HTML
weixin_45957302的博客
11-22 2164
json数组格式大家都不陌生，与python的字典一样，简而言之 就是JS当中的数据类型，(2)for循环输出的优势在于，你数据可以再Jons格式里面加，不需要写多余的div盒子，点击事件，或者其他事件，声明一个class，用this方法使用；用循环输出，后期维护简单，你只需加数据，整体样式统一改；先建立好html盒子及样式，再拼接到JS字符串里面；那我们如何把数据类型展示出来，模拟数据库SQL语句。(1) JS渲染到页面的时候，是字符串拼接的。
解决vue数组中对象属性变化页面不渲染问题
01-19
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。 换了关键词搜索找到了相关方法。 其实之前读文档教程的时候看到过这里，但是只有真的使用...
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
在Vue.js框架中，动态添加或删除对象和对象数组是常见的需求，特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先，我们来看一下添加对象到对象数组的核心代码： ```...
Vue 数组和对象更新,但是页面没有刷新的解决方式
10-16
这是因为Vue为了提高性能，只监听了数据对象的属性，并不直接监控数组或对象的内部变化。当数组元素被替换或者对象属性被直接赋值时，Vue无法检测到这些变化，从而导致视图未更新。本文将详细介绍如何解决这个问题。...
vue中更改数组中属性,在页面中不生效的解决方法
10-16
然而，在处理数组及其元素属性时，直接修改数组或对象的属性有时并不会触发视图的更新，这是因为Vue无法检测到这些变化。这通常发生在使用索引直接设置数组项或直接修改对象的属性时。为了触发视图更新，Vue 提供了...
解决Vue 通过下表修改数组,页面不渲染的问题
08-27
解决Vue通过下表修改数组页面不渲染的问题很简单，只需要更新数组元素的属性，而不是直接赋值。同时，我们也可以使用splice()方法来删除和添加元素，以达到“赋值”的效果。希望这篇文章能够帮助开发者解决这个问题...
js将数组转化为一个对象obj，将数组中的内容作为对象的key转化为对象，将数组中的某项内容作为分类来转成对象
Z_kenshou的博客
10-14 1万+
1.js数组转成对象 var list = {}; var arr = ["123","456","789"]; // for in 循环 for (var key in arr) { list[key] = arr[key]; } console.log(list); //控制台打印 打印如下 我的思路就是这样，不止这一种其他循环也可以forEach、map、reduce等等 2.将...
vue实现把数据渲染到下拉框中，点击其中一个数据，后面接上文本
Chenyang_lm的博客
09-17 451
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https:
数组与对象的相互转换
热门推荐
m0_57712926的博客
08-05 2万+
数组与对象的相互转换 数组转对象 需求 let arr = [{label: '男', value: 0},{label: '女', value: 1}] // 转换为 let obj = {0:'男', 1:'女'} 代码实现 let arr = [{label: '男', value: 0},{label: '女', value: 1}] // 方案一 // 思路 // 1、使用数组的forEach方法遍历数组 // 2、定义一个空对象 // 3、将遍历得到的每一个对象中的value值当做新对象的
UNIAPP 运行到微信小程序 
qq18846934849的博客
12-30 779
UNIAPP 运行到微信小程序 坑一，pages.json生成错误，"page/../index" has not been registered yet 如排除页面本身错误 Page（{}）之类的， pages.json也正确配置，检查是否引入微信端无效的：.vue等库 import uniSection from '@/components/uni-section/uni-section.vue'; import uniList from '@/components/uni-list/uni.
对象数组分类并转换为二维数组或对象数组
qq_45327886的博客
01-22 789
js对象数组分类
轮播图一维数组转二维数组
一个前端小白的博客
10-26 117
记得一点笔记 let list= [] city.forEach((item, index) => { // 下标从0开始 所以向下取整 let page = Math.floor(index / 10) if (!list[page]) { list[page] = [] } list[page].push(item) }); console.log(list) ...
轮播图方法一，把每个slider-item看成一个对象进行轮播
weixin_30399871的博客
09-11 586
focus-slider 只用于存放轮播图片，方便修改图片内容 其他的按照默认创建即可。 注意这里的slider.html文件是在 text文件下面 index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"...
数组转对象/对象转数组/数组转树
m0_58875280的博客
08-04 421
nice
微信小程序如何让数组按照某个数组字段进行排列
最新发布
05-22
可以使用JavaScript的`sort()`方法来实现数组按照某个字段进行排列。 假设有一个数组`list`，其中每个元素都是一个对象，对象中包含一个字段`value`，我们可以将数组按照`value`字段进行升序排列，示例代码如下： ```javascript list.sort(function(a, b) { return a.value - b.value; }); ``` 如果要按照`value`字段进行降序排列，只需要将函数中的返回值改为`b.value - a.value`即可，示例代码如下： ```javascript list.sort(function(a, b) { return b.value - a.value; }); ``` 这样就可以让数组按照某个字段进行排列了。在微信小程序中，可以直接在`Page`对象的`data`属性中定义数组，在页面渲染时调用`sort()`方法对数组进行排序即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值