【js数组操作】将for循环出的数据组成数组，push方法往数组里增加对象

要实现的效果根据栏目名称获取栏目下的图片//定义栏目图片是个空数组columnPic = []getColumnPic() {//栏目名称是数组let picCode = ['QKTB', 'GZZB', 'YLS', 'NSBDDJT', 'MRYT']for (let i = 0; i < picCode.length; i++) {this.api.getColumnsInfoByCo

maozuai~zi

5253人浏览 · 2021-07-06 09:35:05

maozuai~zi · 2021-07-06 09:35:05 发布

数组操作一

echart柱形图有两条柱子，一条柱子显示数据人均收入，一条柱子显示数据人均消费
已有数据
在这里插入图片描述
echart需要的数据

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
echart图表中将数据组合成两条柱子数据
<body>
    <script>
        window.onload = function () {
            var data = [
                {
                    "DWMC": "圣爵菲斯",
                    "DWBH": "D001HB",
                    "RJSR_BA_3": 23583,
                    "RJXC_BA_4": 11125
                },
                {
                    "DWMC": "芒果文旅",
                    "DWBH": "E001HB",
                    "RJSR_BA_3": 0,
                    "RJXC_BA_4": 17312
                },
                {
                    "DWMC": "金鹰城",
                    "DWBH": "F001",
                    "RJSR_BA_3": 8786,
                    "RJXC_BA_4": 13644
                },
                {
                    "DWMC": "久之润",
                    "DWBH": "I001HB",
                    "RJSR_BA_3": 122587,
                    "RJXC_BA_4": 25068
                },
                {
                    "DWMC": "达晨财智",
                    "DWBH": "H008HB",
                    "RJSR_BA_3": 142941,
                    "RJXC_BA_4": 45985
                },
                {
                    "DWMC": "网络集团",
                    "DWBH": "C001HB",
                    "RJSR_BA_3": 34014,
                    "RJXC_BA_4": 19375
                },
                {
                    "DWMC": "世界之窗",
                    "DWBH": "E002HB",
                    "RJSR_BA_3": 38875,
                    "RJXC_BA_4": 7748
                },
                {
                    "DWMC": "韵洪",
                    "DWBH": "A001HB",
                    "RJSR_BA_3": 1562837,
                    "RJXC_BA_4": 18001
                },
                {
                    "DWMC": "影业美国香港",
                    "DWBH": "B006HB",
                    "RJSR_BA_3": 320317,
                    "RJXC_BA_4": null
                },
                {
                    "DWMC": "中艺达晨",
                    "DWBH": "G001",
                    "RJSR_BA_3": 55608,
                    "RJXC_BA_4": 30161
                },
                {
                    "DWMC": "华丰达",
                    "DWBH": "H001HB",
                    "RJSR_BA_3": 49956,
                    "RJXC_BA_4": 18718
                },
                {
                    "DWMC": "达晨创投",
                    "DWBH": "H006HB",
                    "RJSR_BA_3": 75627,
                    "RJXC_BA_4": 27298
                },
                {
                    "DWMC": "传媒总部",
                    "DWBH": "0001",
                    "RJSR_BA_3": 0,
                    "RJXC_BA_4": 70977
                }
            ]
            var valNameList = [
                {
                    "seriesName": "人均收入",
                    "name": "RJSR_BA_3"
                },
                {
                    "seriesName": "人均薪酬",
                    "name": "RJXC_BA_4"
                }
            ]
            console.log('data', data)
            var chartData = []
            for(var i=0; i< valNameList.length; i++){
                /**
                 * seriesData定义在这里，当i=1的时候，seriesData为空，循环后seriesData为13条数据，否则为26条数据，
                 * seriesData定义在这里，chartData长度为2，每个有13条数据
                 * 如果在外面定义seriesData = []，seresData为 13 + 13条数据，chartData长度为26
                 * 可以使用debugger调试看执行过程
                */
                var seriesData = []
                for(var j=0; j< data.length; j++){
                    seriesData.push({
                        name: data[j].DWMC,
                        value: data[j][valNameList[i].name],
                        DWBH: data[j].DWBH,
                        
                    })
                }
                chartData.push(seriesData)
            }
            console.log('newData', seriesData)
            console.log('chartData', chartData)

        }
    </script>
</body>
</html>

数组操作二

push往数组里增加对象

var list = []
list.push({
title: "姓名",
name: 'wangjie'
})
console.log(this.list) //打印出来的list = [{title: '姓名', name: 'wangjie'}]

要实现的效果

根据栏目名称获取栏目下的图片

//定义栏目图片是个空数组
columnPic = []

getColumnPic() {
	//栏目名称是数组
    let picCode = ['QKTB', 'GZZB', 'YLS', 'NSBDDJT', 'MRYT']
    
    for (let i = 0; i < picCode.length; i++) {
      this.api.getColumnsInfoByCode(picCode[i]).subscribe(res => {
        console.log('res',res)
        //将for循环出的数据添加到columnPic数组
        this.columnPic.push(res)
      })
    }
    console.log('this.columnPic',this.columnPic)
  }