How to bind list of objects to handsontable?

Question

I have a json object,which contains following data.

var myData = [{
        "sNo": "1.0",
        "boqName": "Installation of pole 11 KV",
        "unit": "Nos",
        
        "opportunityBoqOverHeadMasterList": [{
                "opportunityBoqOverHeadMasterId": 14,
                "value": 41.3
            },
            {
                "opportunityBoqOverHeadMasterId": 16,
                "value": 41.3
            },
            {
                "opportunityBoqOverHeadMasterId": 24,
                "value": 100
            }
        ]
    },
    {
        "sNo": "2.0",
        "boqName": "Installation of pole 33 KV",
        "unit": "Nos",
       
        "opportunityBoqOverHeadMasterList": [{
                "opportunityBoqOverHeadMasterId": 15,
                "value": 52.92
            },
            {
                "opportunityBoqOverHeadMasterId": 17,
                "value": 52.92
            },
            {
                "opportunityBoqOverHeadMasterId": 25,
                "value": 0
            }
        ]
    },

];

}

i need to display the value of opportunityBoqOverHeadMasterList next to the unit cell. Please help me to display data in handsontable.
Please refer jsfiddle for working example https://jsfiddle.net/Umanath16/aty5wfg7/22/

Answer 1

You could try processing the data. Notice below that I changed your columns array, create a new myNewData variable and create nested loops to format the data.

    var columns = [
        {
            "data": "sNo"
        },
        {
            "data": "boqName"
        },
        {
            "data": "unit"
        },
        ,
        {
            "data": "Percentage1"
        },
        {
            "data": "Percentage2"
        },
        {
            "data": "Percentage3"
        }
    ];

Change the data obj...

    var myNewData = [];
    
    for (var i = 0; i < myData.length; i++) {
        myNewData.push({
          sNo: myData[i].sNo,
          boqName: myData[i].boqName,
          unit: myData[i].unit
        });
        for (var j = 0; j < myData[i].opportunityBoqOverHeadMasterList.length; j++) {
          myNewData[i]["Percentage"+(j+1)] = myData[i].opportunityBoqOverHeadMasterList[j].value;
        }
    }

    hot = new Handsontable(example, {
        data: myNewData,
        rowHeaders: true,
        columns: columns,
        rowHeaderWidth: 100,
        colWidths: 120,
        colHeaders: colHeaders
    });
}

This is just one possible solution. Please think about possible improvements. What if the data does not have the same fields? It would need to be dynamic regardless of the field names. Also how would you improve the loops, etc.