将JavaScript函数输出变量作为字符串用于另一个函数

Question

The following JavaScript functions output data plans, the first function myDataPlan is called in the second function dataPlanOutput .

function myDataPlan(networkGroupId, countryCode) {
    data_url = apiURL + '/api/v4/networkGroups/' + networkGroupId + '/plansExt?countryCode=' + countryCode;
    jQuery.getJSON(data_url, function (dataPlan) {
        jQuery.each(dataPlan.list, function (i, list) {
            var currencySymbol = getCurrencySymbol(list.currency); 
            //Price
            var content = '<tr>';
            content += '<td>' + currencySymbol + list.price + '</td>';
            //Data Limits
            content += '<td>' + getDataLimit(list) + '</td>';
            //Data Length
            content += '<td>' + list.validityPeriodInDays + '&nbsp;Days</td>';
            content += '</tr>';
            jQuery(content).appendTo("#dataplan_list");
        });
    });
}

function dataPlanOutput(countryCode) {
    document.getElementById("dataplan_list").innerHTML = "";
    network_url = apiURL + '/api/v4/countries/' + countryCode;
    jQuery.getJSON(network_url, function (networkGroup) {
        jQuery.each(networkGroup.list, function (i, list) {
            var countryName = list.region;
            var networkGroupId = list.networkGroupId;
            myDataPlan(networkGroupId, countryCode);
            document.getElementById('dataplan_list').innerHTML += '<tr><td colspan="3" class="title-h4">' + countryName + '</td></tr>';
        });
    });
}

Currently I have myDataPlan printing to the div of #dataplan_list within the function. What I would like it to do is when the function is called it then creates a variable (lets call it printDataPlan )that is added to the final line of the dataPlanOutput so it looks something like this:

document.getElementById('dataplan_list').innerHTML += '<tr><td colspan="3" class="title-h4">' + countryName + '</td></tr>' + printDataPlan;

Answer 1

Can you just return the value from myDataPlan? And then execute that at the end of your .innerHTML += within dataPlanOutput?

function myDataPlan(networkGroupId, countryCode) {
data_url = apiURL + '/api/v4/networkGroups/' + networkGroupId + '/plansExt?countryCode=' + countryCode;
jQuery.getJSON(data_url, function (dataPlan) {
    jQuery.each(dataPlan.list, function (i, list) {
        var currencySymbol = getCurrencySymbol(list.currency); 
        //Price
        var content = '<tr>';
        content += '<td>' + currencySymbol + list.price + '</td>';
        //Data Limits
        content += '<td>' + getDataLimit(list) + '</td>';
        //Data Length
        content += '<td>' + list.validityPeriodInDays + '&nbsp;Days</td>';
        content += '</tr>';
        return content;
    });
});
}

function dataPlanOutput(countryCode) {
document.getElementById("dataplan_list").innerHTML = "";
network_url = apiURL + '/api/v4/countries/' + countryCode;
jQuery.getJSON(network_url, function (networkGroup) {
    jQuery.each(networkGroup.list, function (i, list) {
        var countryName = list.region;
        var networkGroupId = list.networkGroupId;
        myDataPlan(networkGroupId, countryCode);
        document.getElementById('dataplan_list').innerHTML += '<tr><td colspan="3" class="title-h4">' + countryName + '</td></tr>' + myDataPlan('var1','var2');
    });
});
}