数组对象降维显示 

<!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>

<body>
    <div id="TYMD">1231231</div>
</body>

</html>

<script>
    var MList = [{
        subItemName: '供应商'
    }];
    var SList = [];
    var XRList = [];

    SList = [
        [{ suppllerName: "安徽楚江科技新材料股份有限公司", subItemName: "2材料1",taxPrice: 1.71 },{suppllerName: "安徽楚江科技新材料股份有限公司",subItemName: "2材料1",taxPrice: 1.71,}],
        [{ suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "材料2",taxPrice: 4 },{ suppllerName: "武汉钢铁江北集团有限公司精密带钢厂",subItemName: "2材料1",taxPrice: 1.71 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "材料2", taxPrice: 3 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "2材料1", taxPrice: 1.71 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "2材料1", taxPrice: 1.71 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "2材料1", taxPrice: 1.71 }
        ], 
        [{ suppllerName: "武汉钢铁江北集团", subItemName: "材料3", taxPrice: 1.9 }]
    ];

    MList = [{
            subItemName: '供应商'
        },
        [{ suppllerName: "安徽楚江科技新材料股份有限公司", subItemName: "2材料1",taxPrice: 1.71 },{suppllerName: "安徽楚江科技新材料股份有限公司",subItemName: "2材料1",taxPrice: 1.71,}],
        [{ suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "材料2",taxPrice: 4 },{ suppllerName: "武汉钢铁江北集团有限公司精密带钢厂",subItemName: "2材料1",taxPrice: 1.71 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "材料2", taxPrice: 3 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "2材料1", taxPrice: 1.71 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "2材料1", taxPrice: 1.71 },
            { suppllerName: "武汉钢铁江北集团有限公司精密带钢厂", subItemName: "2材料1", taxPrice: 1.71 }
        ], 
        [{ suppllerName: "武汉钢铁江北集团", subItemName: "材料3", taxPrice: 1.9 }]
    ];

    var aaa = '';
    var MRow = '';

    let SFList = [];
    for (let i = 0; i < SList.length; i++) {
        const element = SList[i];
        let At = {};
        let subItemNameList = element.map(item => {
            return item.subItemName
        }).reduce((prev, next) => {
            prev[next] = (prev[next] + 1) || 1;
            return prev;
        }, {});

        At = Object.assign(At, subItemNameList);
        SFList.push(At);
    };

    console.log(SFList);

    // SFList = [{
    //     材料1: 2
    // }, {
    //     材料1: 3,
    //     材料2: 2
    // }, {
    //     材料3: 3,
    //     材料2: 1
    // }];

    let TYList = {};
    for (let u = 0; u < SFList.length; u++) {
        const object = SFList[u];
        for (const key in object) {
            if (Object.hasOwnProperty.call(object, key)) {
                const element = object[key];
                if (Object.keys(TYList).length == 0) {
                    TYList[`${key}`] = object[key];
                } else if (!TYList.hasOwnProperty(`${key}`)) {
                    TYList[`${key}`] = object[key];
                } else {
                    for (const Tykey in TYList) {
                        if (Object.hasOwnProperty.call(TYList, Tykey)) {
                            const TYelement = TYList[Tykey];
                            //  有 key  有Tykey
                            if (Tykey == key) {
                                if (element > TYelement) {
                                    TYList[`${key}`] = element
                                } else {
                                    TYList[`${key}`] = TYelement
                                }
                            }
                        }
                    }
                }
            }
        }
    };

    console.log(TYList);
    // TYList = { "材料1": 3, "材料2": 2, "材料3": 3 };
    XRList = [];
    for (const key in TYList) {
        if (Object.hasOwnProperty.call(TYList, key)) {
            const element = TYList[key];
            for (let i = 0; i < element; i++) {
                XRList.push({
                    subItemName: key
                });
            }
        }
    };

    console.log(XRList);
    // XRList = [{ "subItemName": "材料1" }, { "subItemName": "材料1" }, { "subItemName": "材料1" }, { "subItemName": "材料2" }, { "subItemName": "材料2" }, { "subItemName": "材料3" }, { "subItemName": "材料3" }, { "subItemName": "材料3" }]

    // 排序方法
    var compare = function(obj1, obj2) {
        var val1 = obj1.subItemName.match(/\d+/g);
        var val2 = obj2.subItemName.match(/\d+/g);

        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
    XRList = XRList.sort(compare); // 按照排序中的材料中的数子排序
    //   [{"subItemName":"材料1"},{"subItemName":"材料1"},{"subItemName":"材料1"},{"subItemName":"材料2"},{"subItemName":"材料2"},{"subItemName":"材料3"},{"subItemName":"材料3"},{"subItemName":"材料3"}]

    XRList.forEach((item, index) => {
        MRow = MRow + '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + item.subItemName + '</span></td>'
    });

    aaa = '<tr>' +
        '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:200px;padding: 0 5px 0 5px;font-weight: bolder;text-align: center;"><span>' + MList[0].subItemName + '</span></td>' +
        MRow +
        '</tr>';
    let SortList = [];
    SortList.push('suppllerName');

    for (let r = 0; r < XRList.length; r++) {
        const element = XRList[r];
        SortList.push(XRList[r]['subItemName']);
    }
    console.log(SortList);
    // SortList = ['suppllerName', '材料2', '材料2', '1材料1', '1材料1', '1材料1', '2材', '材料3', '材料3'];
    let STList = [];
    for (let j = 0; j < SList.length; j++) {
        const elementT = SList[j];
        let SetSTlit = [];
        for (let i = 0; i < elementT.length; i++) {
            const element = elementT[i];
            let JList = {};
            JList['suppllerName'] = element['suppllerName'];
            JList[`${element['subItemName']}`] = element['taxPrice'];
            SetSTlit.push(JList);
        }
        STList.push(SetSTlit);
    };
    console.log(STList);
    //   [  [  {"suppllerName":"安徽楚江科技新材料股份有限公司","2材料1":1.71},{"suppllerName":"安徽楚江科技新材料股份有限公司","2材料1":1.71}],    
    //      [  {"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","材料2":4},  {"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71}, {"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","材料2":3},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71}, {"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71}, {"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71}],
    //      [{"suppllerName":"武汉钢铁江北集团","材料3":1.9}]
    //   ]

    //  let TYList = { "2材料1": 4, "材料2": 2, "材料3": 1 };
    //  SFList = [{  2材料1: 2}, {2材料1: 4,材料2: 2}, {材料3: 1}];

    debugger;
    for (let i = 0; i < SFList.length; i++) {
        const element = SFList[i];

        for (const key in TYList) {
            if (Object.hasOwnProperty.call(TYList, key)) {
                const elementT = TYList[key];
                if (element.hasOwnProperty(`${key}`)) {
                    if (elementT > element[`${key}`]) {
                        let TRows = elementT - element[`${key}`];

                        for (let t = 0; t < TRows; t++) {
                            let Rows = {}
                            Rows['suppllerName'] = STList[i][0]['suppllerName'],
                                Rows[`${key}`] = '';
                            STList[i].push(Rows);

                        }
                    }

                } else {

                    for (let j = 0; j < elementT; j++) {
                        let Rows = {}
                        Rows['suppllerName'] = STList[i][0]['suppllerName'],
                            Rows[`${key}`] = '';
                        STList[i].push(Rows);
                    }

                }

            }
        }
    }

    console.log(STList);

    debugger;
    // STList = [
    //     [{ "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": 1.71 }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": 1.71 }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": "" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": "" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "材料2": "" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "材料2": "" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "材料3": "" }],
    //     [{ "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "材料2": 4 }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71 }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "材料2": 3 }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71 }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71 }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71 }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "材料3": "" }],
    //     [{ "suppllerName": "武汉钢铁江北集团", "材料3": 1.9 }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "" }, { "suppllerName": "武汉钢铁江北集团", "材料2": "" }, { "suppllerName": "武汉钢铁江北集团", "材料2": "" }]
    // ];

    // SortList = ['suppllerName', '材料2', '材料2', '2材料1', '2材料1', '2材料1', '2材料1', '材料3'];

    let SXList = [];
    for (let i = 0; i < STList.length; i++) {
        const element = STList[i];
        let SetList = [];
        for (let j = 0; j < element.length; j++) {
            const object = element[j];
            let keyItems = [];
            for (const key in object) {
                if (Object.hasOwnProperty.call(object, key)) {
                    const element = object[key];
                    keyItems.push(key);
                };
            };
            object['A'] = keyItems[1] == 'suppllerName' ? keyItems[0] : keyItems[1]
            SetList.push(object);
        };
        SXList.push(SetList);
    };
    console.log(SXList);

    // SXList = [
    //     [{ "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": 1.71, "A": "2材料1" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": 1.71, "A": "2材料1" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": "", "A": "2材料1" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "2材料1": "", "A": "2材料1" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "材料2": "", "A": "材料2" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "材料2": "", "A": "材料2" }, { "suppllerName": "安徽楚江科技新材料股份有限公司", "材料3": "", "A": "材料3" }],
    //     [{ "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "材料2": 4, "A": "材料2" }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71, "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "材料2": 3, "A": "材料2" }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71, "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71, "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "2材料1": 1.71, "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团有限公司精密带钢厂", "材料3": "", "A": "材料3" }],
    //     [{ "suppllerName": "武汉钢铁江北集团", "材料3": 1.9, "A": "材料3" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "", "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "", "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "", "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团", "2材料1": "", "A": "2材料1" }, { "suppllerName": "武汉钢铁江北集团", "材料2": "", "A": "材料2" }, { "suppllerName": "武汉钢铁江北集团", "材料2": "", "A": "材料2" }]
    // ];

    // 排序方法
    var compareSort = function(obj1, obj2) {
        var val1 = obj1.A.match(/\d+/g);
        var val2 = obj2.A.match(/\d+/g);
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    };
    SLCList = [];
    for (let i = 0; i < SXList.length; i++) {
        const element = SXList[i];
        let SetData = element.sort(compareSort);
        SLCList.push(SetData);
    };
    console.log(SLCList);

    // SLCList = [[{"suppllerName":"安徽楚江科技新材料股份有限公司","材料2":"","A":"材料2"},{"suppllerName":"安徽楚江科技新材料股份有限公司","材料2":"","A":"材料2"},{"suppllerName":"安徽楚江科技新材料股份有限公司","2材料1":1.71,"A":"2材料1"},{"suppllerName":"安徽楚江科技新材料股份有限公司","2材料1":1.71,"A":"2材料1"},{"suppllerName":"安徽楚江科技新材料股份有限公司","2材料1":"","A":"2材料1"},{"suppllerName":"安徽楚江科技新材料股份有限公司","2材料1":"","A":"2材料1"},{"suppllerName":"安徽楚江科技新材料股份有限公司","材料3":"","A":"材料3"}],
    // [{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","材料2":4,"A":"材料2"},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","材料2":3,"A":"材料2"},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71,"A":"2材料1"},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71,"A":"2材料1"},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71,"A":"2材料1"},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","2材料1":1.71,"A":"2材料1"},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","材料3":"","A":"材料3"}],
    // [{"suppllerName":"武汉钢铁江北集团","材料2":"","A":"材料2"},{"suppllerName":"武汉钢铁江北集团","材料2":"","A":"材料2"},{"suppllerName":"武汉钢铁江北集团","2材料1":"","A":"2材料1"},{"suppllerName":"武汉钢铁江北集团","2材料1":"","A":"2材料1"},{"suppllerName":"武汉钢铁江北集团","2材料1":"","A":"2材料1"},{"suppllerName":"武汉钢铁江北集团","2材料1":"","A":"2材料1"},{"suppllerName":"武汉钢铁江北集团","材料3":1.9,"A":"材料3"}]]

    let ST = '';
    for (let i = 0; i < SLCList.length; i++) {
        const element = SLCList[i];
        ST += '<tr>';
        ST += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:200px;padding: 0 5px 0 5px;"><span>' + `${element[0]['suppllerName']}` + '</span></td>';
        for (let j = 0; j < element.length; j++) {
            const object = element[j];
            ST += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:200px;padding: 0 5px 0 5px;"><span>' + `${object[`${SortList[j + 1]}`]}` + '</span></td>';
        }
        ST += '<tr>';
    }

    var ccc = '';
    MList.forEach((item) => {
        ccc = ccc + '<col width="100"></col>'
    });

    var ttt = '<table><colgroup><col width="200"></col>' +
        ccc +
        '</colgroup><thead><tr>' +
        '</tr></thead><tbody>' + aaa + ST +
        '</tbody></table>';

    var ppp = '<div id="testdivid" style="display: flex;justify-content: center;margin: 0 auto;margin: 0;padding: 0;"><div id="divTTable" >' + ttt + '</div></div>'
    TYMD.innerHTML = ppp;
</script>

 

posted @ 2023-03-09 15:08  龙旋风  阅读(37)  评论(0)    收藏  举报