revenueKlaviyo_table 在我的 Jquery 代码中未定义

Question

我正在开发一个仪表板，用于从 Klaviyo 获取并显示收入数据。我使用 jQuery 和 AJAX 来获取数据并填充表格。但是，我遇到了 RevenueKlaviyo_table 未定义的问题。这是我的代码的相关部分：

<div class="box-header with-border white_bg">
    <h3 class="box-title">Revenue by Klaviyo</h3>
</div>
<div class="box-body">
    <table width="100%" id="klaviyoData" class="revenue-device-table">
        <thead>
            <tr>
                <th width="70%" class="text-right">Total</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="overlay" id="revenueKlaviyo_preloader">
    <i class="fa fa-refresh fa-spin"></i>
</div>

let accessToken = '';

        $.ajax({
            url: "{{ route('klaviyo-authenticate') }}",
            type: "post",
            dataType: "json",
            success: function (data) {
                accessToken = data.access_token;
                
                // window.dashboard = new Dashboard(); 
                window.RevenueKlaviyo = new RevenueKlaviyo(window.dashboard, "https://api.cloudofgoods.com/api/v1/klaviyo/metrics/convertion-rate");
            },
            error: function (e) {
                console.log('Error fetching access token: ' + e);
            }
        });
            
        // Revenue Klaviyo 
        let RevenueKlaviyo = (function (dashboard, url) {
            let preloader, revenueKlaviyo_table;
            let status = false;

            if (dashboard === undefined) {
                dashboard = new Dashboard(); 
            }

            let init = function () {
                revenueKlaviyo_table = $('#klaviyoData tbody');
                preloader = $('#revenueKlaviyo_preloader');
                console.log("aaaa");
                populate();
            }

            let preloaderLoading = function () {
                preloader.html('<i class="fa fa-refresh fa-spin"></i>').show();
            }

            let preloaderSuccess = function () {
                preloader.hide();
            }

            let preloaderError = function () {
                preloader.html('<i class="fa fa-exclamation color-red"></i>').show();
            }

            let getStatus = function () {
                return status;
            }

            let populate = function () {
                console.log(accessToken);
                revenueKlaviyo_table.html('');
                $.ajax({
                    type: "get",
                    url: url,
                    data: {
                        dateText: dashboard.getDateText(),
                        customPickerFromDate: dashboard.getCustomPickerDateRanges().from,
                        customPickerToDate: dashboard.getCustomPickerDateRanges().to,
                        // interval: "day"
                        // city: dashboard.getCity()
                    },
                    headers: {
                        "Authorization": "Bearer " + accessToken,
                        // "Content-Type": "application/json"
                    },
                    beforeSend: function () {
                        preloaderLoading();
                        status = false;
                    },
                    success: function (response) {
                        let data = response.data;
                        if (data && data.total !== undefined) {
                            let total = data.total;
                            revenueKlaviyo_table.append(`<tr><td">${total.toFixed(2)}</td></tr>`);
                            preloaderSuccess();
                            status = true;
                        } else {
                            console.log('No data');
                            preloaderError();
                            status = true;
                        }
                    },
                    error: function () {
                        preloaderError();
                        status = true;
                    }
                });
            }

            let refresh = function () {
                populate();
            }

            return {
                init: init,
                refresh: refresh,
                getStatus: getStatus
            };
        });

我已确保 HTML 中存在 #klaviyoData 表。有人可以帮我弄清楚为什么 RevenueKlaviyo_table 未定义以及如何解决这个问题吗？

Answer 1

RevenueKlaviyo 函数似乎没有正确实例化。当您使用

window.RevenueKlaviyo = new RevenueKlaviyo(...)

时，它应该正确实例化对象并调用其

init

方法以确保定义

revenueKlaviyo_table

。但是，在当前代码中，

RevenueKlaviyo

函数被定义为立即调用函数表达式 (IIFE)，而不是构造函数。因此，

new

关键字无法按预期工作。

您可以将

RevenueKlaviyo

转换为构造函数，并确保实例化后调用

init

方法。这是您的代码的修订版本：

let accessToken = '';

$.ajax({
    url: "{{ route('klaviyo-authenticate') }}",
    type: "post",
    dataType: "json",
    success: function (data) {
        accessToken = data.access_token;
        
        // Instantiate the RevenueKlaviyo object and call its init method
        window.RevenueKlaviyo = new RevenueKlaviyo(window.dashboard, "https://api.cloudofgoods.com/api/v1/klaviyo/metrics/convertion-rate");
        window.RevenueKlaviyo.init();
    },
    error: function (e) {
        console.log('Error fetching access token: ' + e);
    }
});

// Revenue Klaviyo 
function RevenueKlaviyo(dashboard, url) {
    let preloader, revenueKlaviyo_table;
    let status = false;

    if (dashboard === undefined) {
        dashboard = new Dashboard(); 
    }

    this.init = function () {
        revenueKlaviyo_table = $('#klaviyoData tbody');
        preloader = $('#revenueKlaviyo_preloader');
        console.log("aaaa");
        this.populate();
    }

    let preloaderLoading = function () {
        preloader.html('<i class="fa fa-refresh fa-spin"></i>').show();
    }

    let preloaderSuccess = function () {
        preloader.hide();
    }

    let preloaderError = function () {
        preloader.html('<i class="fa fa-exclamation color-red"></i>').show();
    }

    this.getStatus = function () {
        return status;
    }

    this.populate = function () {
        console.log(accessToken);
        revenueKlaviyo_table.html('');
        $.ajax({
            type: "get",
            url: url,
            data: {
                dateText: dashboard.getDateText(),
                customPickerFromDate: dashboard.getCustomPickerDateRanges().from,
                customPickerToDate: dashboard.getCustomPickerDateRanges().to,
                // interval: "day"
                // city: dashboard.getCity()
            },
            headers: {
                "Authorization": "Bearer " + accessToken,
                // "Content-Type": "application/json"
            },
            beforeSend: function () {
                preloaderLoading();
                status = false;
            },
            success: function (response) {
                let data = response.data;
                if (data && data.total !== undefined) {
                    let total = data.total;
                    revenueKlaviyo_table.append(`<tr><td>${total.toFixed(2)}</td></tr>`);
                    preloaderSuccess();
                    status = true;
                } else {
                    console.log('No data');
                    preloaderError();
                    status = true;
                }
            },
            error: function () {
                preloaderError();
                status = true;
            }
        });
    }

    this.refresh = function () {
        this.populate();
    }
}

主要变化：

1. 构造函数：将

   RevenueKlaviyo

   从 IIFE 更改为构造函数。
2. 方法调用：使用

   init

   可以访问

   populate

   的

   refresh

   、

   RevenueKlaviyo

   和

   this

   方法。
3. 实例化和初始化：创建新的

   RevenueKlaviyo

   对象后，调用其

   init

   方法以确保

   revenueKlaviyo_table

   已定义并可供使用。

这些更改确保

revenueKlaviyo_table

变量已正确初始化并在

RevenueKlaviyo

对象中可用。