How to load data into webform table automatically

Frappe Framework
, , ,
1

[
{
“question”: “How satisfied are you with your job?”,
“choices”: [“Very Satisfied”, “Satisfied”, “Not Satisfied”]
},
{
“question”: “Do you feel that your work is meaningful?”,
“choices”: [“Yes”, “Somewhat”, “No”]
},
{
“question”: “Do you feel that your work is valued?”,
“choices”: [“Yes”, “Somewhat”, “No”]
},
{
“question”: “Do you feel that you have the resources to do your job effectively?”,
“choices”: [“Yes”, “Somewhat”, “No”]
},
{
“question”: “Do you feel that you have the opportunity to learn and grow in your job?”,
“choices”: [“Yes”, “Somewhat”, “No”]
}
]
this is my code but its not working. how to load the data into a row automatically in web form table.
function loadResponseIntoTable(response) {
if (cur_frm) {
var table = cur_frm.fields_dict.content.grid.grid_rows;
var data = response;
var row_index = 0;

		// Log the field names for debugging purposes
		console.log(table.fields);

		// Loop through the response data and insert each question/choice pair into a new row of the table
		data.forEach(function (item) {
			var row = table.add_new_row();
			row.question = item.question;
			row.choice = item.choices.join("\n");

			row_index++;
		});
	}
}