Issue with calling multiple JSON files

Question

So i have looked around and found some good information on how to call 2 json files using jquery. While I am able to call both files now I am getting the following error: var weather = data.data.weather;

If I comment out one of the variables (dataUrl2) that calls in a json file then it works with no problem. Below is a sample of the js

    var zipcode = '27560';
    var appid = '96afa96cadeb7165258ae95b77fdc';
    var startdate = '2015-10-01';
    var enddate = '2015-10-31';
    var timeperiod ='24';           

    var dataUrl = '//api.worldweatheronline.com/premium/v1/past-weather.ashx?q='+ zipcode +'&format=json&date='+ startdate +'&enddate='+ enddate +'&tp='+ timeperiod +'&key='+ appid    

    var dataUrl2 = '//westbrookfl.com/wp-content/plugins/CSAnalytics/lib/data/data-ChannelData.php'

    //Creates Table for Citation Data
        jQuery.when(
            jQuery.getJSON(dataUrl),
            jQuery.getJSON(dataUrl2)
        ).then(function (data, datatwo) {
            console.log(data, datatwo); 
            var citationHTML = '';
            jQuery.each(data, function (i) {
            var weather = data.data.weather;
                for (var i = 0; i < weather.length; ++i) {
                    citationHTML += '<li id="day'+[i]+'" class="day"><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('#citation_report').append(citationHTML);
        });     

Here is fiddle as well: https://jsfiddle.net/joseph_a_garcia/s41kr5hj/1/

Any help would be appreciated.

Answer 1

Here is a working demo.

JS

var zipcode = '27560';
        var appid = '96afa96cadeb7165258ae95b77fdc';
        var startdate = '2015-10-01';
        var enddate = '2015-10-31';
        var timeperiod ='24';           

        var dataUrl = '//api.worldweatheronline.com/premium/v1/past-weather.ashx?q='+ zipcode +'&format=json&date='+ startdate +'&enddate='+ enddate +'&tp='+ timeperiod +'&key='+ appid    

        var dataUrl2 = '//westbrookfl.com/wp-content/plugins/CSAnalytics/lib/data/data-ChannelData.php'

        //Creates Table for Citation Data       
$.when(
    $.getJSON(dataUrl),
    $.getJSON(dataUrl2)
).done (function (data, data2) {
    var data = data[0].data;
    console.log(data);
                var citationHTML = '';
                jQuery.each(data, function (i) {
                var weather = data.weather;
                    for (var i = 0; i < weather.length; ++i) {
                        citationHTML += '<li id="day'+[i]+'" class="day"><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('#citation_report').append(citationHTML);
            });

NOTE: The weather object reference was not correct in your codes. I have added this line var data = data[0].data; and it's working fine! You can get second getJSON data in data2 variable if you want to use that!

Answer 2

It looks like you need to pass as many arguments to the done function that you pass to .when, so done(function(data1, data2) {...

Best.