To summarize today, array objects look up the same elements based on a type and group them together.

I’ve read a lot of articles about this kind of problem, but the code logic is still complex, not clean, and not easy to maintain ⚒.

Requirements (group presentation)

As shown in the figure, the first group is drug orderGroupCode, and the second group is non-drug idForm

Note: The data is flat and the order has been arranged

When you see a requirement like this, it’s usually a for loop plus type judgment.

Enjoy the first version of the code

Train of thought

  • Identify drugs and non-drugs by type, and follow the subscripts of the array.
  • Add up, middle, and lower icon identifiers based on the array’s subscript
  • HTML adds up, middle, and down images according to the logo
function grouplingDatas(tableData, key = "") {
    if(! (tableDatainstanceof Array)) return
    tableData.forEach((item, index) = > {
        // Group drugs under the icon
        if (item.orderGroupCode) {
            if (tableData[index - 1] && tableData[index].orderGroupCode === tableData[index - 1].orderGroupCode) {
                if (key) {
                    if (tableData[index][key] === tableData[index - 1][key] && (! tableData[index +1] || tableData[index][key] ! == tableData[index +1][key] || tableData[index].orderGroupCode ! = tableData[index +1].orderGroupCode)) {
                        item.groupBttomIcon = true; }}else {
                    if(! tableData[index +1] || tableData[index].orderGroupCode ! == tableData[index +1].orderGroupCode) {
                        item.groupBttomIcon = true; }}}}// Drugs -- on the icon
        if (tableData[index].orderGroupCode) {
            if (tableData[index + 1] && tableData[index].orderGroupCode === tableData[index + 1].orderGroupCode) {
                if (key) {
                    if (tableData[index][key] === tableData[index + 1][key] && (! tableData[index -1] || tableData[index][key] ! == tableData[index -1][key] || tableData[index].orderGroupCode ! = tableData[index -1].orderGroupCode)) {
                        item.showBegin = true; }}else {
                    if(! tableData[index -1] || tableData[index - 1] && tableData[index].orderGroupCode ! == tableData[index -1].orderGroupCode) {
                        item.showBegin = true; }}}}/ / in the icon
        if (
            (tableData[index].idForm && tableData[index - 1] &&
                tableData[index].idForm === tableData[index - 1].idForm &&
                tableData[index + 1] &&
                tableData[index].idForm === tableData[index + 1].idForm) ||
            (tableData[index].orderGroupCode && tableData[index - 1] &&
                tableData[index].orderGroupCode === tableData[index - 1].orderGroupCode &&
                tableData[index + 1] &&
                tableData[index].orderGroupCode === tableData[index + 1].orderGroupCode)
        ) {
            if (key) {
                if (tableData[index][key] === tableData[index - 1][key] &&
                    tableData[index][key] === tableData[index + 1][key]) {
                    tableData[index].middleIcon = true}}else {
                tableData[index].middleIcon = true}}}); }// Non-drug and drug logic.Copy the code

Look at the above code, to tell you the truth, no problem, the program works.

But if the criteria are too long and you add a type, you have to repeat a bunch of code, which is not easy to maintain *

2. Enjoy the second version of the code

Train of thought

  • The object is used to find the desired property, and the found data is placed in an array
  • Up, middle, and down ICONS, based on the length of the group array
  • Take a closer look at the following code logic 😆
orderGroupCodeDataAndDateHandler = function (arr = [], name) {
    let obj = {}
    arr.forEach(row= > {
        this.$set(row, 'fontRange'.void 0)
        if (row.orderGroupCode) {
            let str = `${row.orderGroupCode}-${row[name]}`
            if(! obj[str]) { obj[str] = [row] }else {
                obj[str].push(row)
            }
            let l = obj[str].length
            if (l > 1) {
                if (l === 2) {
                    let curr = obj[str][0]
                    this.$set(curr, 'fontRange'.'first')
                    let last = obj[str][1]
                    this.$set(last, 'fontRange'.'last')}else {
                    let middle = obj[str][l - 2]
                    this.$set(middle, 'fontRange'.'middle')
                    let last = obj[str][l - 1]
                    this.$set(last, 'fontRange'.'last')}}}})return obj
    }
Copy the code

It is easy to get lost just looking at the code above. Here is a demo I wrote. If you are interested, you can paste and copy it and try to change it.

Complete demo

<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> <script> var arr = [{"idExecutionRecord": "507F ", "idOrders":" 257F ", "idExecutionListDept": "33C4 ", "executionListName":" Long term Order ", "idVisit": "Ee22 ", "ordersName":" Vitamin K1 injection 1ml: 10mg 10mg IV infusion 2/ day ", "drugSpecification": "1ml: 10mg", "Dose ": 10, "doseUnits": "Mg ", "freqDescription": "2/ day"}, {"idExecutionRecord": "287F ", "idOrders":" 007F ", "idExecutionListDept": "33C4 ", "executionListName":" Long Term order ", "idVisit": "EE11 ", "ordersName": "10% Glucose injection 250ml 250ml INTRAVENOUS infusion 2/ day ", "drugSpecification": "250ml", "Dose ": 250, "doseUnits": "Ml ", "freqDescription": "2/ day ", {"idExecutionRecord":" 307F ", "idOrders": "067F ", "idExecutionListDept": "83A1 ", "executionListName":" Test treatment list ", "idVisit": "EE11 ", "ordersName": DrugSpecification: 2ml:0.5mg, Dose: 2, doseUnits: "ML, freqDescription: }, {"idExecutionRecord": "3a7F ", "idOrders":" 0C7F ", "idExecutionListDept": "83A1 ", "executionListName": "Test treatment list ", "idVisit":" EE11 ", "ordersName": "10% Glucose injection (250ml) 250ml 250ml IV 3/ day ", "drugSpecification": "250ml", "Dose ": 250, "freqDescription": "3/ day"}, {"idExecutionRecord": "447F ", "idOrders": "0F7F ", "idExecutionListDept":" 83A1 ", "executionListName": "Test cure list ", "idVisit":" EE11 ", "ordersName": DrugSpecification: 20ml, Dose: 20, doseUnits: "ML ", freqDescription: "3/ day "}, {"idExecutionRecord": "457F ", "idOrders":" 0F7F ", "idExecutionListDept": "83A1 ", "executionListName": "IdVisit ":" EE11 ", "ordersName": "Shenmei Injection 20ml 20ml intravenous3 / day ", "drugSpecification": "20ml"," Dose ": 20, "doseUnits": "ML ", "freqDescription": "3/ day"}, {"idExecutionRecord": "327F ", "idOrders": "2B7F ", "idExecutionListDept":" 33C4 ", "executionListName": "Long term Order ", "idVisit":" EE22 ", "ordersName": Dose: 20, "doseUnits": "ML ", "freqDescription": "2/ day "},] let obj = {} arr.map(item=> {let STR = '${item.idExecutionListDept}'; if (obj[str]) { obj[str].push(item); } else { obj[str] = [item]; } }) console.log( obj) </script> </body> </html>Copy the code

conclusion

Using the object idea to get the same type of data to form a group, very convenient.

This method is my colleague told me, here is also borrowed from his method, yyds👏.

This method solves a lot of problems and eliminates the need to write n lines of code to code the brick 😂.

If you have a better way to do this, you can comment in the comments section.