JS 重构数组

王老san
  • 548

现有如下数组

var a = ['ZCOLOR','ZSIZE']
var b = [{ZCOLOR:"001",ZCOLORTEXT:"白色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40},{ZCOLOR:"002",ZCOLORTEXT:"黑色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40}]

想要得到如下数组

clipboard.png

是一个二维数组,里面有6个数组 也就是 颜色2种,尺寸3种 2*3 = 6

clipboard.png 这个是后台规定的表名 是固定的

拓展,如果

var a = ['ZCOLOR','ZSIZE','ZBX']
var b = [{ZCOLOR:"001",ZCOLORTEXT:"白色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'A'},
{ZCOLOR:"001",ZCOLORTEXT:"白色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'B'},{ZCOLOR:"002",ZCOLORTEXT:"黑色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'A'},
{ZCOLOR:"002",ZCOLORTEXT:"黑色",ZSIZE36:"36",ZSIZE38:"38",ZSIZE40:"40,ZBX:'B'}]

那么 得到一个二维数组里面就有2x3x2= 12个 如图

clipboard.png

碰到后台这么传输数据,实在有点头大,希望寻求帮助。

回复
阅读 1.7k
1 个回答
✓ 已被采纳

说明:对于这样的需求,我是这样理解的:选项组是以颜色为分组标识,每个颜色下面存在不同的SIZE选项或是其他选项,通过选择某一颜色,确定接下来哪些选项是可以选择的。如果我对你需求的理解无误,那就说明一个选项组可以以颜色表示ZCOLOR作为这个分组的唯一ID标识,接下来就是基于ZCOLOR进行打组了。
代码如下:

const fields = ['ZCOLOR','ZSIZE','ZBX'];
// 定义用作组ID的字段;
const idFlag = fields[0];
// 定义一个新的字典对象
let formatedData = {};
// 除了打组以外,还需要将你所有备用数据进行集合;
// 参照 fields 中定义的字段需求进行map数据拆分
let spiltFields = ((fields)=>{
    let obj = {};
    fields.map(k => obj[k] = []);
    return obj;
})(fields);
// 会得到这样的数据字典结构,这里存放所有的a中定义的字段的不重复数据:
// spiltFields === {ZCOLOR: [],...}


// 在对各个字段类型添加数据结构
((src){
    src.map(it=>{
        // 暂存字典ID;
        let _id = it[idFlag];
        for(const k in it){
            // 这里去掉key中的数字,如:ZSIZE36 将被转换位 ZSIZE,这样好与你的目标字段进行匹配;
            const mk = k.replace(/\d/g,"");
            const v = it[k];
            // 分别判断当前k是否在spiltFields字典中定义&&该字典数据中是否还没有当前k的值,满足条件后,对数据进行push操作
            if (mk in spiltFields && !spiltFields[mk].includes(v)) {
                spiltFields[mk].push(v);
            }
            // 进行数据格式化
            if (k === idFlag) {
                // 判断idFlag的值是否以注册到字典中
                if (!(_id in formatedData)) {
                    // 生成数据字段组
                    formatedData[_id] = ((st)=>{
                        fields.map(_k=>{
                            if(_k !== idFlag) {
                                st[_k] = [];
                            }
                        })
                        return st;
                    })({})
                } else continue;
            } else {
                let cur = formatedData[_id][mk];
                if (Array.isArray(cur) && !cur.includes(v)) {
                    cur.push(v);
                }
            }
        }
    })
})(b);

你将会得到用于显示的数据字典 spiltFields:

clipboard.png

和用于查询的数据字典formatedData:

clipboard.png

接下来的一切都好办了,不管你的b数据源如何变,只要基于配置aidFlag的设置,你就能得到友好访问的数据,最后你就根据后端的传值格式传值就行了。

由于你们后端格式是固定的,建议你在前端也创建一个map与之对应,这样更方便后续配置维护。

代码手写,你可能需要自己改造优化一下,大致思路就是这样。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏