JSONフィードオブジェクトのJavascript変数が認識されない

Question

2つのJSONフィードを使用して日付をチェックし、オブジェクトの現在の日付と日付に応じてデータを表示しますが、何らかの理由でオブジェクトの変数c定義されていません。私はハードコードされたURLと「要素」関数でデータを交換すると、すべてが正常に動作しますが、データはCのオブジェクトの内部に格納されていない理由を私はわからない：

jQuery(function ($) { 
    var url1 = 'feed1.json'; 
    var url2 = 'feed2.json'; 
    var id = shop_id.replace(/\[|\]|\"/g, ''); 
    var c = {}; 
    var logo; 

    $.when(request1(), request2()).done(function (r1, r2) { 
     var results1 = $.grep(r1[0], function (e) {return e.id == id}); 
     var results2 = $.grep(r2[0], function (e) {return e.shop_id == id}); 
     var fallback = $.grep(r2[0], function (e) {return e.PSN == 'fallback160'}); 

     if (!$.isEmptyObject(results2)) { 

      if (!$.isEmptyObject(results1)) { 

       var today = new Date(); 
       var endDate = formatDate(results1[0].Ende); 
       var startDate = formatDate(results1[0].Start); 

       console.log(endDate); 
       console.log(startDate); 

       if (today <= endDate && today >= startDate) { 
        c = {'one': results1[0].INC_Suffix, 'separator': ' bis ', 'two': results1[0].Ende, 'link': results1[0].Deeplink, 'logo': results2[0].logo_url}; 
        elements(); 
       } 

      } 
      else { 
       c = {'one': results2[0].STD_INC_Factor, 'separator': ' ', 'two': results2[0].STD_INC_Suffix, 'link': results2[0].deeplink, 'logo': results2[0].logo_url}; 
       elements(); 
      } 
     } 
     else { 
      $('#clicktag').html('<img src="' + fallback[0].logo_url + '">').attr('href', clicktag + encodeURIComponent(fallback[0].deeplink)); 
     } 

     //resize fonts based on height of the container 
     var intBoxHeight = $('#interupter').height(); 
     var intInnerHeight = $('#interupterInner').height(); 
     var intFontSize = parseInt($('#interupterInner').css('font-size')); 

     while (intInnerHeight > intBoxHeight) { 
      --intFontSize; 
      $('#interupterInner').css('font-size', intFontSize + 'px'); 
      intBoxHeight = $('#interupter').height(); 
      intInnerHeight = $('#interupterInner').height(); 
     } 

    }).fail(function() { 
     c = {'one': 'DIE BESTEN', 'separator': ' ', 'two': 'ANGEBOTE', 'link': '#', 'logo': 'img/fallback.png'}; 
     elements(); 
    }) 

    function elements() { 
     $('#storeLogo span').html('<img src=\'' + c.logo + '\'>'); 
     $('#interupterInner').html(c.one + c.separator + c.two); 
     $('#clicktag').attr('href', clicktag + encodeURIComponent(c.link)); 
     tl.play();  
    } 

    function formatDate (d) { 
     var part = d.split('.'); 
     return new Date(part[1] + '.' + part[0] + '.' + part[2]); 
    } 

    console.log(elements()); 
    function request1() {return $.getJSON(url1)}; 
    function request2() {return $.getJSON(url2)}; 

}) 

Answer 1

私がコードを読んだとき、変数cを他の場所に使用する予定があるかどうか疑問に思っていました。そうでない場合は、各スコープ内でローカルに宣言し、パラメータとして渡します。つまりelements(c)です。

また、変数だけで問題が発生しているように見えるため、この例を少し簡略化して解析しました。以下の簡略化されたスニペットでは、elements()関数に欠けていたのでreturn c.one + ' ' + c.two;を追加し、変数clicktagの宣言を追加しました。そのほかに

、私はconsole.log(elements());がdoneとfail機能の外に呼び出されたことに気づいた - 要求が実行されている場合、長いc対数関数が呼び出されたときに、まだ初期化されていないの原因となる競合状態があるかもしれません。あなたのテストで明らかになった場合は、各関数（doneとfail）の中にログステートメントコールを入れてください。

要求の遅れなしで、以下のコードが正常に動作しているようです（Internet ExplorerとChrome - Firefoxをインストールしていないため、以下のスニペットで対応できます）。

jQuery(function($) { 
 
    var c = {}; 
 
    var clicktag="https://stackoverflow.com/questions/47086470/javascript-variable-from-json-feed-object-not-recognized/47089907?noredirect="; 
 
    $.when(SampleRequest(1), SampleRequest(2)).done(function(r1, r2) { 
 
    c = { 
 
     'one': 'SUCCESS - DIE BESTEN', 
 
     'separator': ' ', 
 
     'two': 'ANGEBOTE', 
 
     'link': '1#', 
 
     'logo': 'img/fallback.png' 
 
    }; 
 
    elements(); 
 
    }).fail(function() { 
 
    c = { 
 
     'one': 'FAIL - DIE BESTEN', 
 
     'separator': ' ', 
 
     'two': 'ANGEBOTE', 
 
     'link': '1#', 
 
     'logo': 'img/fallback.png' 
 
    }; 
 
    elements(); 
 
    }) 
 

 
    // change: commented tl.play, and added return statement 
 
    function elements() { 
 
    $('#storeLogo span').html('<img src=\'' + c.logo + '\'>'); 
 
    $('#interupterInner').html(c.one + c.separator + c.two); 
 
    $('#clicktag').attr('href', clicktag + encodeURIComponent(c.link)); 
 
    //tl.play();  
 
    return c.one + ' ' + c.two; 
 
    } 
 

 
    function formatDate(d) { 
 
    var part = d.split('.'); 
 
    return new Date(part[1] + '.' + part[0] + '.' + part[2]); 
 
    } 
 

 
    console.log(elements()); 
 

 
    function SampleRequest(reqId) { 
 
    return "{id:'" + reqId + "'}"; 
 
    }; 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span id='Storelogo'></span> 
 
<div id='interupterInner'></div> 
 
<div id='interupterInner'></div> 
 
<a id='clicktag'>click me</a>

アップデート：コメント欄でwintermuteの回答を1として、エラーの原因は、Firefoxで厳しい日付の解析です。

これを解析するために日付を正しくフォーマットする方法を説明する良いリンクが見つかりましたhere。本来、日付区切り文字としてピリオド.ではなく、スラッシュ/を使用している場合に役立ちます。

しかし、今私はlatest Firefox version 57で試してみましたが、この振る舞いを再現することはできません。コードスニペットはPC上で修正することなく正常に動作します。

Answer 2

あなたはあなたが正しくjqueryをロードしていること、 ？ jquery.min.jsファイルをサーバーに配置し、ドメインからロードしてください。