Question

我正在使用2个JSON提要来检查日期并根据当前日期和其中一个对象中的日期显示数据，但由于某种原因，对象的变量c未定义。当我用硬编码的网址替换'elements'函数中的数据时，一切正常，但我不确定为什么数据没有存储在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)。

我还简化了一些示例以便于分析，因为您似乎只对变量有问题。在下面的简化代码段中，我添加了return c.one + ' ' + c.two;，因为elements()函数中缺少该代码，我添加了变量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的回复，错误的原因是Firefox中更严格的日期解析。

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

但是，我现在已经尝试使用latest Firefox version 57，但无法回溯此行为 - 代码段在我的电脑上运行正常而没有任何修改。

Answer 2

您确定正确加载jquery吗？尝试将jquery.min.js文件放入您的服务器并从您的域中加载。

JSON提要对象的Javascript变量无法识别

2 个答案: