无法识别来自 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 - 如果没有，请考虑在每个范围内本地声明它并将其作为参数传递，即 元素(c)。

我还稍微简化了示例以便于分析，因为您似乎只对变量有问题。在下面的简化代码段中，我添加了 return c.one + ' ' + c.two; 因为你的 elements() 函数中缺少它，我添加了一个声明变量 clicktag。

除此之外，我注意到 console.log(elements()); 是在 done 和 fail 函数之外调用的——如果request is running long 可能存在竞争条件，导致 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评论里的回复，报错的原因是Firefox对Date的解析比较严格。

我找到了一个描述如何正确格式化日期以解析它的好链接 here .从本质上讲，如果您使用正斜杠 / 而不是句点 . 作为日期分隔符，这似乎会有所帮助。

但是，我现在已经尝试使用 latest Firefox version 57 ，但无法追溯此行为 - 代码片段在我的 PC 上无需任何修改即可正常运行。