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에 대한 선언을 추가했습니다. 요청이 실행중인 경우 긴 로그 함수가 호출 될 때 c가 아직 초기화되지 않는 원인 경쟁 조건이있을 수 있습니다 -

그 외에, 나는 console.log(elements());이 done 및 fail 기능을 외부에서 호출되는 것으로 나타났습니다. 테스트 결과에 해당되는 경우 로그 명령문 호출을 각 함수 ( done 및 fail)에 넣습니다.

아래의 코드는 요청 지연없이 잘 실행되는 것 같습니다 (인터넷 익스플로러와 크롬 - 테스트를 위해 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 당으로의 응답이 오류의 원인은 파이어 폭스의 엄격한 날짜 구문 분석이다.

구문 분석을 위해 날짜 형식을 올바르게 지정하는 방법에 대한 좋은 링크가 있습니다 (here). 본질적으로 날짜 구분 기호로 . 대신 슬래시 /을 사용하는 경우 도움이되는 것 같습니다.

그러나 지금은 latest Firefox version 57으로 시도했지만이 동작을 되돌릴 수는 없습니다. 코드 스 니펫은 PC에서 수정하지 않고도 정상적으로 실행됩니다.

Answer 2

당신은 당신이 제대로 jquery를로드하는 것을 있습니까 ? jquery.min.js 파일을 서버에 놓고 도메인에서로드하십시오.