JS refactoring array

the following array exists 

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

want to get the following array

clipboard.png

,6 23 2*3 = 6

clipboard.png

,

2x3x2= 12

clipboard.png

it"s a bit big to transfer data like this in the background, and I want to ask for help.

Javascript
Jan.28,2022

Note: for such a requirement, I understand it like this: the option group is identified by color, and there are different SIZE options or other options under each color. By selecting a certain color, determine which options can be selected next. If I understand your requirements correctly, it means that an option group can use the color representation ZCOLOR as the unique ID logo for this group, and then group based on ZCOLOR. The
code is as follows: 

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];
            // kspiltFields&&kpush
            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);

you will get a data dictionary for display spiltFields :

clipboard.png

formatedData:

clipboard.png

everything is easy next. No matter how your b data source changes, you can get friendly access data based on configuring a and idFlag . Finally, you can pass the value according to the back-end value format.

since your backend format is fixed, it is recommended that you create a map corresponding to it at the front end, which is more convenient for subsequent configuration and maintenance.

handwritten code, you may need to modify and optimize it yourself, and that's the general idea.

Previous: Want to ask a basic question about js ~

Next: In the project, simply using vue.js this file, after all, can have most uses?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e54b60-452e4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e54b60-452e4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?