Javascript variable from JSON feed object not recognized

Question

I use 2 JSON channels to check the date and display data from them depending on the current date and date in one of the objects, but for some reason the variable c, which is the object, is undefined. When I replace the data in the “elements” function with hard-coded URLs, everything works fine, but I'm not sure why the data is not stored inside the c object:

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

When I read the code, I was wondering if you plan to use the variable c anywhere else - if not, consider declaring it locally inside each scope and passing it as a parameter, i.e. elements(c) .

I also simplified this example a bit to simplify the analysis, because you only seem to have a problem with the variable. In the simplified snippet below, I added return c.one + ' ' + c.two; because it was not in your elements() function, and I added an declaration for the clicktag variable.

In addition, I noticed that console.log(elements()); called outside of the done and fail functions - if the request is running for a long time, there may be a race condition that calls c , not yet initialized when the log function is called. If your testing shows that it is, then place a log statement call inside each function ( done and fail ).

The code below - without delaying the request - seems to work fine (Internet Explorer and Chrome - I do not have Firefox installed to check it, maybe you can do it using the snippet below and tell me):

 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> 

Update: In response to the wintermute answer in the comments, the cause of the error is a more strict date parsing in Firefox.

I found a good link describing how to format the date correctly so that I can analyze it here . Essentially, this helps if you use a slash / , rather than a period . as a date separator.

However, I now tried it with the latest version of Firefox 57 , but I cannot repeat this behavior - the code fragment works fine, without any change on my PC.

Answer 2

Are you sure you loaded jquery correctly? Try placing the jquery.min.js file on your server and downloading it from your domain.