JS变换数据再显示

标签：变换数据材料 subItemName JS let key suppllerName taxPrice
<!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 = '';

    debugger;


    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);
    debugger;
    // 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);
    debugger;
    //  ['suppllerName', '材料1', '材料1', '材料1', '材料2', '材料2', '材料3', '材料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];
            SetSTlit['suppllerName'] = element['suppllerName'],
                SetSTlit[`${element['subItemName']}`] = element['taxPrice'];
        }
        STList.push(SetSTlit);
    };
    console.log(STList);
    debugger;
    // STList = [{"suppllerName":"安徽楚江科技新材料股份有限公司","材料2":1.29,"合计":1.29},{"suppllerName":"武汉钢铁江北集团有限公司精密带钢厂","材料1":3,"合计":4.29,"材料2":1.29}];
    let SQList = [];
    for (let u = 0; u < STList.length; u++) {
        const elemenU = STList[u];
        SQList.push(elemenU);

        for (let t = 0; t < STList.length; t++) {
            const elementT = STList[t];
            for (var key in elementT) {
                if (!!elemenU[key]) {
                } else {
                    SQList[u][key] = '';
                }

            }
        }
    };

    let TT = '';
    for (let i = 0; i < SQList.length; i++) {
        const elementi = SQList[i];
        TT += '<tr>';
        for (let j = 0; j < SortList.length; j++) {
            if (SortList[j] == 'suppllerName') {
                TT += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:200px;padding: 0 5px 0 5px;"><span>' + elementi[`${SortList[j]}`] + '</span></td>';
            } else {
                TT += '<td style="border: 1px solid;height:30px;line-height:30px;font-size:13px;width:90px;padding: 0 5px 0 5px;text-align: center;"><span>' + elementi[`${SortList[j]}`] + '</span></td>';
            }
        }
        TT += '</tr>';
    }
    console.log(TT);

    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 + TT +
        '</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>
这个是我写的一个特殊页面显示,后台返回一个特殊的数据结构,
经过js变化后,给页面显示一个正常的数据显示模式. 最终的显示结果如下
标签：变换,数据,材料,subItemName,JS,let,key,suppllerName,taxPrice
From： https://www.cnblogs.com/LFxanla/p/17198508.html
相关文章

赞助商

阅读排行
