对象数组的赋值操作问题

JS 同时被 2 个专栏收录
20 篇文章 0 订阅
8 篇文章 0 订阅

项目中遇到关于对象数组的操作问题,大概是将数据绑定到Layui的Table中。由于layui表格的数据填充是按照它的格式需求填入的,比如目前我遇到的是:

 cols: [[ 
            { field: 'index_col1', title: '序号', width: 66 },
            { field: 'stationName_col1', title: '站名',width: 106 },
            { field: 'temp_col1', title: '实时气温', width: 122.5, edit: 'text'},
            { field: 'index_col2', title: '序号', width: 66 },
            { field: 'stationName_col2', title: '站名', width: 106 },
            { field: 'temp_col2', title: '实时气温', width: 122.5, edit: 'text' },
            { field: 'index_col3', title: '序号', width: 66 },
            { field: 'stationName_col3', title: '站名', width: 106 },
            { field: 'temp_col3', title: '实时气温', width: 122.5, edit: 'text'}
        ]],

然后我获取到的数据大概是这样的:

data = [{ "index": "1", "stationName": "安吉1", "temp": "43" }, { "index": "1", "stationName": "安吉2", "temp": "23" }, {"index": "1", "stationName": "安吉3", "temp": "13" },
    { "index": "1", "stationName": "安吉4", "temp": "63" }, { "index": "1", "stationName": "安吉5", "temp": "43" }, {"index": "1", "stationName": "安吉6", "temp": "53" },
    { "index": "1", "stationName": "安吉7", "temp": "123" }, { "index": "1", "stationName": "安吉8", "temp": "33" }, {"index": "1", "stationName": "安吉8", "temp": "13" },
    { "index": "1", "stationName": "安吉10", "temp": "37" }, { "index": "1", "stationName": "安吉11", "temp": "23" }, {"index": "1", "stationName": "安吉12", "temp": "12" },
    { "index": "1", "stationName": "安吉13", "temp": "53" }, { "index": "1", "stationName": "安吉14", "temp": "32" }, {"index": "1", "stationName": "安吉15", "temp": "34" },
    { "index": "1", "stationName": "安吉16", "temp": "26" }, { "index": "1", "stationName": "安吉17", "temp": "124" }, {"index": "1", "stationName": "安吉18", "temp": "16" },
    { "index": "1", "stationName": "安吉19", "temp": "62" }, { "index": "1", "stationName": "安吉20", "temp": "53" }, {"index": "1", "stationName": "安吉21", "temp": "23" },
    { "index": "1", "stationName": "安吉22", "temp": "13" }, { "index": "1", "stationName": "安吉23", "temp": "81" }, {"index": "1", "stationName": "安吉24", "temp": "17" },
    { "index": "1", "stationName": "安吉25", "temp": "53" }, { "index": "1", "stationName": "安吉26", "temp": "83" }, {"index": "1", "stationName": "安吉27", "temp": "48" },
    { "index": "1", "stationName": "安吉28", "temp": "233" }, { "index": "1", "stationName": "安吉29", "temp": "16" }, {"index": "1", "stationName": "安吉30", "temp": "13" },
    { "index": "1", "stationName": "安吉31", "temp": "3" }, { "index": "1", "stationName": "安吉32", "temp": "43" }, {"index": "1", "stationName": "安吉33", "temp": "43" },
    { "index": "1", "stationName": "安吉34", "temp": "16" }, { "index": "1", "stationName": "安吉35", "temp": "31" }, {"index": "1", "stationName": "安吉36", "temp": "73" },
    { "index": "1", "stationName": "安吉37", "temp": "3" }, { "index": "1", "stationName": "安吉38", "temp": "41" }, {"index": "1", "stationName": "安吉39", "temp": "12" },
    { "index": "1", "stationName": "安吉40", "temp": "9" }, { "index": "1", "stationName": "安吉41", "temp": "26" }, {"index": "1", "stationName": "安吉42", "temp": "12" },
    { "index": "1", "stationName": "安吉43", "temp": "10" }, { "index": "1", "stationName": "安吉44", "temp": "17" }, {"index": "1", "stationName": "安吉45", "temp": "43" },
];

这时候就需要将data数组中的元素进行拆分,项目的需求是三列数据展示,依次从上到下展示的数据是按temp数值的大小进行展示的。所以在拆分之前需要将data进行按temp大小的重新排序。跳过

接着就是把排序好的数据进行拆分:

 var result = [];
                                                                    //三等分拆
        for (var i = 0, len = data.length; i < len; i += parseInt(data.length / 3)) {
            result.push(data.slice(i, i + parseInt(data.length / 3)));
        }
 var data_1 = new Array(),
            data_2 = new Array(),
            data_3 = new Array();
        colData = new Array();
        // console.log(result);
        data_1 = result[0];
        data_2 = result[1];
        data_3 = result[2];

然后分别用三个新的数组获取。

然后就是按照layui Table需求的格式对数据进行重组:

 for (var i = 0; i < data_1.length; i++) {
            var temp = data_1[i].stationName;
            var tempIndex = data_1[i].index;
            var tempTemp = data_1[i].temp;
            delete (data_1[i].stationName);
            delete (data_1[i].index);
            delete (data_1[i].temp);
            data_1[i].index_col1 = tempIndex;
            data_1[i].stationName_col1 = temp;
            data_1[i].temp_col1 = tempTemp;
        }
        for (var i = 0; i < data_2.length; i++) {
            var temp = data_2[i].stationName;
            var tempIndex = data_2[i].index;
            var tempTemp = data_2[i].temp;
            delete (data_2[i].stationName);
            delete (data_2[i].index);
            delete (data_2[i].temp);
            data_2[i].index_col2 = tempIndex;
            data_2[i].stationName_col2 = temp;
            data_2[i].temp_col2 = tempTemp;

        }
        for (var i = 0; i < data_3.length; i++) {
            var temp = data_3[i].stationName;
            var tempIndex = data_3[i].index;
            var tempTemp = data_3[i].temp;
            delete (data_3[i].stationName);
            delete (data_3[i].index);
            delete (data_3[i].temp);
            data_3[i].index_col3 = tempIndex;
            data_3[i].stationName_col3 = temp;
            data_3[i].temp_col3 = tempTemp;

        }
        for (var i = 0; i < data_1.length; i++) {
            colData[i] = Object.assign(data_1[i], data_2[i], data_3[i]);
        }

colData[i] = Object.assign(data_1[i], data_2[i], data_3[i]);这个方法是将三个数组重组成一个,方便填入数据。

table.render({

........

data:colData

...

})

填入数据。

但是,项目要求对展示的数据还要对temp的数值大小进行降序,升序的排列展示。

在这里,由于已经对数据data进行过操作了,所以data已经发生了改变,如果要满足自己的要求去排序的话,就不能在第一次排序中直接对data进行操作。因为对象的赋值都是指向性的。

所以要用新的对象去承载data中的对象值,然后赋值给要用到变量数组。

 function getNewData() {
        firstData = new Array();
        for (var i = 0; i < data.length; i++) {
            var obj = {};
            obj.index = data[i].index;
            obj.stationName = data[i].stationName;
            obj.temp = data[i].temp;
            firstData.push(obj);
        }
    }

在这里使用firstData获取data中的对象元素。每次要操作data时,都重新调用一次该函数。

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值