如何将对象列表绑定到handsontable？答案

【问题标题】：How to bind list of objects to handsontable?如何将对象列表绑定到handsontable？
【发布时间】：2022-01-08 00:50:42
【问题描述】：

我有一个 json 对象，其中包含以下数据。

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
            }
        ]
    },

];

}

我需要在单元格旁边显示机会BoqOverHeadMasterList 的值。请帮我在handsontable中显示数据。
请参考 jsfiddle 的工作示例https://jsfiddle.net/Umanath16/aty5wfg7/22/

【问题讨论】：

标签： javascript handsontable

【解决方案1】：

您可以尝试处理数据。请注意下面我更改了您的 columns 数组，创建了一个新的 myNewData 变量并创建了嵌套循环来格式化数据。

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

更改数据对象...

    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
    });
}

这只是一种可能的解决方案。 请考虑可能的改进。如果数据没有相同的字段怎么办？无论字段名称如何，它都需要是动态的。还有你将如何改进循环等。

【讨论】：