I would like to pass the value of ability_data_list, which is set by ajax's return, into the "data" field in Chart.js format in order to make Chartjs show the data graph.

I tried a lot of times and search for some methods to fix it, but I can't still solve it to draw the chart.

Could anyone point out for me where I am wrong or how I can correct it?

        const ability_data_list = [];
        
        $.ajax({
        type : 'GET',
        url : '/recommendation/get?userid='+user_id+'&concept='+concept_list
        })
        .done(function(ability_data) {
            if (ability_data.error) {
                alert('error')
                
            }
            else if(!ability_data){
                console.log("no ability data");
                
            }
            else {
                
                
                for(var j = 0; j <ability_data.length; j++){
                    
                    ability_data_list.push(ability_data[j]);
                    
                }
                
            
                
            }
            
            
        });
    var ctx = document.getElementById( "adaptive_bar" ),
            example = new Chart(ctx, {
                // 參數設定
                type: "bar", // 圖表類型
                data: {
                    // labels: [ "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8" ], // 標題
                    //   labels: '{{contents_name[0]['contents_name']}}',
                    labels: contents_list,
                    datasets: [{
                        label: "*****", // 標籤
                        data: [ability_data_list], // 資料
                        backgroundColor: [ // 背景色
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(255, 206, 86, 0.5)',
                        'rgba(180, 238, 180, 0.5)'
                        ],
                        borderWidth: 1 
                    }]
                },
                  

Thank you for your time.