I am binding data to a Datagrid and trying to form Bands which has multiple column inside it. I have 2 array of objects, the first one has columns and data, and the second one has band information.

columns= [
    {
      RNK: 1,
      MONTHS: "Jan",
      MOPS_KERO: 129.534,
      "1-2": -4532.6048,
    },
    {
      RNK: 2,
      MONTHS: "Feb",
      MOPS_KERO: 141.1474,
      "1-2": -115628.1486,
    }
  ];

bandInfo = [
    {
      SQL_COLUMN_NAME: "RNK",
      DISPLAY_COLUMN_NAME: "Rnk",
      SORT_ORDER: 1,
      BAND_NAME: "Months",
    },
    {
      SQL_COLUMN_NAME: "MONTHS",
      DISPLAY_COLUMN_NAME: "Month",
      SORT_ORDER: 2,
      BAND_NAME: "Months",
    },
    {
      SQL_COLUMN_NAME: "MOPS_KERO",
      DISPLAY_COLUMN_NAME: "Avg. Mean For Kero Fortnight Month (USC/USG)",
      SORT_ORDER: 5,
      BAND_NAME: "3",
    },
    {
      SQL_COLUMN_NAME: "1-2",
      DISPLAY_COLUMN_NAME: "Premium Achieved Over Mean (USC/USG)",
      SORT_ORDER: 6,
      BAND_NAME: "1-2",
    }
  ];

I am trying to achieve it through this code -

columns.forEach((col) => {
      this.bandInfo.forEach((element) => {
        if (col.caption == element.BAND_NAME) {
          col.columns.push({
            caption: element.DISPLAY_COLUMN_NAME,
            dataField: element.SQL_COLUMN_NAME,
          });
        } else {
          col.caption = element.BAND_NAME;
          col.columns = [];
          col.columns.push({
            caption: element.DISPLAY_COLUMN_NAME,
            dataField: element.SQL_COLUMN_NAME,
          });
        }
      });
    });

But with this code I am getting an output like -

[
  {
    "caption": "1-2",
    "dataField": "RNK",
    "columns": [
      {
        "caption": "Premium Achieved Over Mean (USC/USG)",
        "dataField": "1-2"
      }
    ]
  },
  {
    "caption": "1-2",
    "dataField": "MONTHS",
    "columns": [
      {
        "caption": "Premium Achieved Over Mean (USC/USG)",
        "dataField": "1-2"
      }
    ]
  },
  {
    "caption": "1-2",
    "dataField": "MOPS_KERO",
    "columns": [
      {
        "caption": "Premium Achieved Over Mean (USC/USG)",
        "dataField": "1-2"
      }
    ]
  },
  {
    "caption": "1-2",
    "dataField": "1-2",
    "columns": [
      {
        "caption": "Premium Achieved Over Mean (USC/USG)",
        "dataField": "1-2"
      }
    ]
  }
]

But my desired output should be like this -

[
  {
    "caption": "Months",
    "dataField": "RNK",
    "columns": [
      {
        "caption": "Month",
        "dataField": "MONTHS"
      },
      {
        "caption": "Rnk",
        "dataField": "RNK"
      }
    ]
  },
  {
    "caption": "1-2",
    "dataField": "MONTHS",
    "columns": [
      {
        "caption": "Premium Achieved Over Mean (USC/USG)",
        "dataField": "1-2"
      }
    ]
  },
  {
    "caption": "3",
    "dataField": "MOPS_KERO",
    "columns": [
      {
        "caption": "Avg. Mean For Kero Fortnight Month (USC/USG)",
        "dataField": "MOPS_KERO"
      }
    ]
  }
]

I am getting repetitive columns with the code. I am not able to figure out what is going wrong in the nested loops. Help is appreciated! Thanks!

CodePudding user response：

Not sure why do you need columns variable to produce that output. However:

const response = bandInfo.reduce((prev, curr) => {
    const found = prev.find((el) => el.caption === curr.BAND_NAME);
    if (!found) {
            prev.push({
            caption: curr.BAND_NAME,
            dataField: curr.SQL_COLUMN_NAME,
            columns: [
                { caption: curr.DISPLAY_COLUMN_NAME, dataField: curr.SQL_COLUMN_NAME },
            ],
        });
       return prev;
     }
     found.columns.push({
         caption: curr.DISPLAY_COLUMN_NAME,
         dataField: curr.SQL_COLUMN_NAME,
     });
     return prev;
}, []);

console.log(response)

Produces the output you asked for.