JavaScript前端数据呈现——在Table中显示数据为空的分类

在后端通过sequelize连接mysql数据库,调用相关数据由前端以表格呈现时,会遇到这样一个问题,如下图所示,根据条件筛选数据时,没有与企业3相关的数据。

后端代码如下:

const sql = `select 分类,sum(数量1) 销量,sum(数量2) 同期 from 数据库 group by 分类`
const [results1, metadata1] = await this.app.model.query(sql);
console.log(results1)
// 获取数组results1
// [
//     {
//         '分类': '企业1',
//         '销量': 30028,
//         '同期': 36606
//     },
//     {
//         '分类': '企业2',
//         '销量': 580,
//         '同期': 253
//     },
//     {
//         '分类': '企业4',
//         '销量': 55528,
//         '同期': 83322
//     }


// ]

      该结果在前端以表格形式呈现,就会缺少企业3这一行数据,但在一些特定的情况下,为了保证表格的完整性,还是需要展示企业3的,这就需要在后端对数据结果进行进一步的处理了:

const array1=[{'分类': '企业1'},
    {'分类': '企业2'},
    {'分类': '企业3'},
    {'分类': '企业4'}]
//先定义一个包含所有分类的数组
const array2=_.differenceBy(array1, results1, '分类');
//使用lodash 中的_.differenceBy 找出results1中缺少的分类
array2.forEach(
     obj=>{
        obj.销量=0
        obj.同期=0
  }
)
//array2 就是我们所缺少的那部分数据

const result2=_.concat(result1,array2)
//通过lodash将result1与array2拼接,得到result2
const obj1={"企业1":1,"企业2":2,"企业3":3,"企业4":4}
results2.forEach(obj => {
      obj.key = obj1[obj.分类]})
const results3= _.orderBy(results2, "key");
//将result2进行排序,获得results3

      这样就能在前端获取我们需要的结果了。

      扩展:

      在这里另外介绍一种利用python中的处理,使用pandas在python中获取相应结果更加简单一些,只需要设置index再重组填充0就OK了:

import pandas as pd
from sqlalchemy import create_engine
engine = ''
sql_query='select 分类,sum(数量1) 销量,sum(数量2) 同期 from 数据库 group by 分类'
df1= pd.read_sql_query(sql_query, engine)#通过pandas获取结果df1
df1.set_index(['分类'])#设置index
df1.reindex(index=['企业1', '企业2', '企业3', '企业4'], fill_value = 0)
#重组index,空值填充0

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值