完成$时无法获取$内的数据

时间:2016-01-27 14:43:53

标签: jquery json

好的,所以我试图找出为什么同样的两件不起作用。一个在我的when / done语句之外工作,但是我需要工作的是在/完成时。有人可以看看,告诉我我做错了什么。能够让3个请求中的2个工作得很好。

jQuery(function() { 

    var ConvExtID = 'jdv_electric';
    var ConvAPIKey = '369281456857b6910b0b8e0b1d7b046c';   
    var ConvAPISec= '%241%24SVUTmT1e%24hqQHTUvAFOoUuZ5bFVqle.';

    var NewConvData ='https://api.logmycalls.com/services/getCallDetails?criteria[external_ouid]='+ConvExtID+'&criteria[start_calldate]=2015-12-01&criteria[end_calldate]=2015-12-31&api_key='+ConvAPIKey+'&api_secret='+ConvAPISec+'&sort_by=id&sort_order=asc';
    var goaltotal = 'https://aspentouch.com/wp-content/plugins/CSAnalytics/lib/data/data-GoalValueTotals.php';
    var WeatherAPI = 'https://api.worldweatheronline.com/premium/v1/past-weather.ashx?q=27560&format=json&date=2015-12-01&enddate=2015-12-31&tp=24&key=5553de26af2e2c672d1042c05800d'

    //Creates Table for Weather Data

var channelHTML = ''
var DispositionAnswered = '';
var DispositionNoAnswer = '';
var TotalCallMin = 0;
var TotalCount = '';
var AvgCallDuration = '';
var ValueCallsSingle = '';
var ValueCalls = '';    
var ValueCallMinutes = 0;

    jQuery.when(
        jQuery.getJSON(WeatherAPI),
        jQuery.getJSON(goaltotal),
        jQuery.getJSON(NewConvData)
    ).done (function (data, data2, data3) {
        var data = data[0].data;
        console.log(data, data2, data3);
        var weatherHTML = '';
        var lookup = {};
        var weather = data.weather;
        for (var i = 0; i < weather.length; ++i) {
            var key = weather[i].date.replace(/-/g,'');
            lookup[key] = i;
            weatherHTML += '<li id="day'+[i]+'" class="day day-container"><div class="date">' + weather[i].date + '</div><div class="svg-icon"><img src="' + weather[i].hourly[0].weatherIconUrl[0].value + '" /></div><div class="data-wrap col2"><p class="data hi-temp"><span>' + weather[i].maxtempF + '</span><sup class="deg ng-scope" data-ng-if="hasValue()">°</sup></p><p class="data lo-temp"><span>' + weather[i].mintempF + '</span><sup class="deg ng-scope" data-ng-if="hasValue()">°</sup></p></div><p class="data desc">' + weather[i].hourly[0].weatherDesc[0].value + '</p></li>';
        }
        jQuery('#weather_report').append(weatherHTML);
        jQuery.each(data2[0], function (i, item) {
            var day = jQuery("#day" + lookup[item.date]);
            day.append('<div class="content"><div class="content-conv-rate"><span class="goal-content">Goal Conversion Rate: </span><span class="goal-value">' + (+item.goalConversionRateAll).toFixed(2) + '%</span></div><div class="content-comp"><span class="goal-content">Goal Completions: </span><span class="goal-value">' + item.goalCompletionsAll + '</span></div><div class="content-value"><span class="goal-content">Goal Value:</span> <span class="goal-value">$' + item.goalvalueall + '</span></div></div>');
        })
        //I cant get this one to work
        jQuery.each(data3.results, function(i, value) {
            channelHTML += '<tr><td class="tg-yw4l">' + data3.results[i].calldate + '</td><td class="tg-yw4l">' + data3.results[i].tracking_number + '</td><td class="tg-yw4l">' + data3.results[i].disposition + '</td><td class="tg-yw4l">' + data3.results[i].duration + '</td><td class="tg-yw4l">' + data3.results[i].id + '</td><td class="tg-yw4l">' + data3.results[i].is_outbound + '</td><td class="tg-yw4l">' + data3.results[i].ouid + '</td><td class="tg-yw4l">' + data3.results[i].repeat_call + '</td><td class="tg-yw4l">' + data3.results[i].caller_id + '</td><td class="tg-yw4l">' + data3.results[i].ringto_number + '</td><td class="tg-yw4l"><audio src="' + data3.results[i].file_url + '" controls></audio></td></tr>';
            console.log(channelHTML);
        }); 
        //
        jQuery('.day-container').click(function() {
          jQuery(this).prev('.highlighter').find('.content').hide();
          jQuery(this).children('.content').animate({width: 'toggle'});
          jQuery(this).toggleClass('highlighter');
        });
        jQuery('#conv_table_one').append(channelHTML);
    });

    jQuery('.showSingle').on('click', function () {
        jQuery(this).addClass('selected').siblings('.anchor').removeClass('selected');
        jQuery('.goal-metrics').hide();
        jQuery('.chart-' + jQuery(this).data('target') + '-container').show();
    });
    jQuery('.showSingle').first().click();

    //this one works just fine
    jQuery.getJSON(NewConvData, function(data3) {
        jQuery.each(data3.results, function(i, value) {
            TotalCount = data3.results.length;

            var phoneNumbers = data3.results[i].caller_id;

            if ( !phoneNumbers.match(/^(\+?1)?(8(00|44|55|66|77|88)[2-9]\d{6})$/) && data3.results[i].duration > 90 && data3.results[i].disposition === "ANSWERED") {
                ValueCalls+++1;
                ValueCallMinutes += parseFloat(data3.results[i].duration) / 60;
            }
            if (value.disposition === "ANSWERED") {DispositionAnswered++;}  
            if (value.disposition === "NO ANSWER") {DispositionNoAnswer++;}
            TotalCallMin += parseFloat(data3.results[i].duration) / 60;
            AvgCallDuration = TotalCallMin / TotalCount;

            jQuery.each(data3.results, function(i, value) {
                channelHTML += '<tr><td class="tg-yw4l">' + data3.results[i].calldate + '</td><td class="tg-yw4l">' + data3.results[i].tracking_number + '</td><td class="tg-yw4l">' + data3.results[i].disposition + '</td><td class="tg-yw4l">' + data3.results[i].duration + '</td><td class="tg-yw4l">' + data3.results[i].id + '</td><td class="tg-yw4l">' + data3.results[i].is_outbound + '</td><td class="tg-yw4l">' + data3.results[i].ouid + '</td><td class="tg-yw4l">' + data3.results[i].repeat_call + '</td><td class="tg-yw4l">' + data3.results[i].caller_id + '</td><td class="tg-yw4l">' + data3.results[i].ringto_number + '</td><td class="tg-yw4l"><audio src="' + data3.results[i].file_url + '" controls></audio></td></tr>';
            });
            jQuery('#TotalCount span').html(TotalCount);
            jQuery('#DispositionAnswered span').html(DispositionAnswered);
            jQuery('#DispositionNoAnswer span').html(DispositionNoAnswer);
            jQuery('#TotalCallMin span').html(TotalCallMin.toFixed(2));
            jQuery('#AvgCallDuration span').html(AvgCallDuration.toFixed(2));
            jQuery('#ValueCalls span').append(ValueCalls);
            jQuery('#ValueCallMinutes span').html(ValueCallMinutes.toFixed(2));
            jQuery('#conv_table_two').append(channelHTML);
        });     
    });     
    //End   
});

这是HTML:

<div id="monthly-calendar">
    <ul id="weather_report" class="week ng-scope first">
    </ul>
</div>
<div>
    <table class="tg" id="conv_table_one" border='1'>
        <tr>
            <th class="tg-yw4l">Call Date</th>
            <th class="tg-yw4l">Tracking Number</th>
            <th class="tg-yw4l">Disposition</th>
            <th class="tg-yw4l">Duration</th>
            <th class="tg-yw4l">ID</th>
            <th class="tg-yw4l">Is Outbound</th>
            <th class="tg-yw4l">OUID</th>
            <th class="tg-yw4l">Repeat Call</th>
            <th class="tg-yw4l">Caller ID</th>
            <th class="tg-yw4l">Ring To Number</th>
            <th class="tg-yw4l">Play Audio File</th>
        </tr>
    </table>
    <table class="tg" id="conv_table_two" border='1'>
        <tr>
            <th class="tg-yw4l">Call Date</th>
            <th class="tg-yw4l">Tracking Number</th>
            <th class="tg-yw4l">Disposition</th>
            <th class="tg-yw4l">Duration</th>
            <th class="tg-yw4l">ID</th>
            <th class="tg-yw4l">Is Outbound</th>
            <th class="tg-yw4l">OUID</th>
            <th class="tg-yw4l">Repeat Call</th>
            <th class="tg-yw4l">Caller ID</th>
            <th class="tg-yw4l">Ring To Number</th>
            <th class="tg-yw4l">Play Audio File</th>
        </tr>
    </table>        
</div>

这也是一个小提琴:https://jsfiddle.net/javapatriot/k3cvb720/

注意:您的浏览器可能会因为拉入数据而挂断。 SORRY!

1 个答案:

答案 0 :(得分:0)

$.when().done()将在您必须更新元素的代码之后运行。

而不是:

jQuery.when(
    jQuery.getJSON(NewConvData),
    jQuery.getJSON(GoalValueTotals)
).done (function (data, data2) {
   // result processing code

});//end of `done()`

jQuery('.totalinv').append(totalcost);
jQuery('.totalleads').append(totalcompletions);
jQuery('.perleadvalue').append(perleadvalue);

将追加代码移动到回调

jQuery.when(
    jQuery.getJSON(NewConvData),
    jQuery.getJSON(GoalValueTotals)
).done (function (data, data2) {
   // result processing code

   jQuery('.totalinv').append(totalcost);
   jQuery('.totalleads').append(totalcompletions);
   jQuery('.perleadvalue').append(perleadvalue);


});//end of `done()`