Frappe Web Form: Child Table Not Populating, Need Help!

I need help adding data to a Child Table in a Web Form using the Frappe Web Form API. The table appears, but no rows are actually added.

I’m using frappe.call to fetch data from Supplier Score Topic Template and attempting to insert it into the Child Table (supplier_score_criteria) using frappe.web_form.add_child. However, no new rows are added, and the data does not appear.

I’d like to know what might be wrong with this code and how I can fix it to ensure the data is properly added.

CODE

frappe.web_form.on('supplier_score_template', function() {
    // เมื่อเลือก supplier_score_template
    let supplier_score_template = frappe.web_form.get_value('supplier_score_template');
    
    if (supplier_score_template) {
        frappe.call({
            method: 'frappe.client.get',
            args: {
                doctype: 'Supplier Score Topic Template',
                name: supplier_score_template
            },
            callback: function(r) {
                if (r.message) {
                    // Log ข้อมูลทั้งหมดจาก Supplier Score Template
                    console.log("✅ ข้อมูล Supplier Score Template:", r.message);
                    
                    // ข้อมูลของ supplier_score_topic
                    const supplier_score_topic = r.message.supplier_score_topic || [];
                    
                    // ล้างข้อมูลใน table ก่อนที่จะเพิ่มข้อมูลใหม่
                    let fieldname = 'supplier_score_criteria'; // ชื่อฟิลด์ที่เป็น Table ใน Web Form
                    let table_field = frappe.web_form.fields_dict[fieldname];
                    
                    // เคลียร์ข้อมูลในตาราง
                    table_field.grid.data = [];
                    
                    // เพิ่มข้อมูลใหม่ลงใน Table
                    supplier_score_topic.forEach(function(item) {
                        // ใช้ frappe.web_form.add_child เพื่อเพิ่มแถวใหม่ในตาราง
                        let row = table_field.grid.add_new_row(); // เพิ่มแถวใหม่
                        
                        // ใส่ค่า topic และ subject ลงในแต่ละแถว
                        frappe.web_form.set_value(row, 'topic', item.topic);  
                        frappe.web_form.set_value(row, 'subject', item.subject); // ใส่ค่า subject
                        
                        // บันทึกค่าเพื่อดูใน Console
                        console.log('✅ Added row with Topic:', item.topic, 'and Subject:', item.subject);
                    });
                    
                    // รีเฟรชตารางหลังจากเพิ่มข้อมูล
                    table_field.grid.refresh();
                }
            }
        });
    }
});