调用多个JSON文件的问题

时间:2015-11-01 19:16:44

标签: jquery json

所以我环顾四周,找到了一些关于如何使用jquery调用2个json文件的好信息。虽然我现在能够调用这两个文件但是我收到以下错误:var weather = data.data.weather;

如果我注释掉在json文件中调用的其中一个变量(dataUrl2),那么它可以正常工作。以下是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);
        });     

这也是小提琴:https://jsfiddle.net/joseph_a_garcia/s41kr5hj/1/

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

这是一个有效的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);
            });

注意:您的代码中的weather对象引用不正确。我添加了这一行var data = data[0].data;,它运行正常!如果要使用它,可以在data2变量中获取第二个getJSON数据!

答案 1 :(得分:0)

看起来您需要将传递给done的{​​{1}}函数传递尽可能多的参数,因此.when

最佳。