0

I'm using jquery and a json array to display the current moon phase and sunrise/set times on a website. This works fine for sunrise/set but for moon phases I've encountered a problem.

When the "closestphase" is on the same day that the data is requested 2 other fields are removed - "currentphase" and "fracillum". This means I can't display the phase or current illumination 4 times per month...

For example the link below shows fracillum and current phase: http://api.usno.navy.mil/rstt/oneday?date=today&coords=54.97N,1.61W&tz=0

but is omitted from this data: http://api.usno.navy.mil/rstt/oneday?date=01/28/2017&coords=54.97N,1.61W&tz=0

I've written the code below to say if curphase and fracillum is undefined and the clostestphase is "New Moon" or "Full Moon" then display fracillum of "0% or "100%" respectively.

Please can someone identify what I'm doing wrong?

$(document).ready(function(){
  $.get("http://api.usno.navy.mil/rstt/oneday?date=01/28/2017&coords=54.97N,1.61W&tz=0", function(data){
    checkPhase(data);
  });
});
$(document).ready(function(){
  $("#suntimes").click(function(){     
    $("#sun").toggle("slide");
  });
});
$(document).ready(function(){
  $("#moontimes").click(function(){     
    $("#moon").toggle("slide");
  });
});
$(document).ready(function(){
  $("#Mobilesuntimes").click(function(){     
    $("#Mobilesun").slideToggle();
  });
});
$(document).ready(function(){
  $("#Mobilemoontimes").click(function(){     
    $("#Mobilemoon").slideToggle();
  });
});

function checkPhase(data){
  if(data.curphase == "undefined" && data.closestphase.phase == "New Moon"){data.fracillum == "0%";}
  else if(data.curphase == "undefined" && data.closestphase.phase == "Full Moon")
  {data.fracillum == "100%";}

  $("#sun").append("<p><b>Newcastle, UK</b><br />Sunrise: " + data.sundata[1].time + " AM<br />Sunset: " + data.sundata[3].time + " PM</p>" );
  $("#moon").append("<p><b>Newcastle, UK</b><br />Percentage Illuminated: " + data.fracillum + "<br />Moon Phase: " + data.curphase + "</p>" );
  $("#Mobilesun").append("<p><b>Newcastle, UK</b><br />Sunrise: " + data.sundata[1].time + " AM<br />Sunset: " + data.sundata[3].time + " PM</p>" );
  $("#Mobilemoon").append("<p><b>Newcastle, UK</b><br />Percentage Illuminated: " + data.fracillum + "<br />Moon Phase: " + data.curphase + "</p>"
  );
}
pacholik
  • 8,607
  • 9
  • 43
  • 55
James Ratliff
  • 3
  • 5

2 Answers2

1

Use typeof data.curphase == "undefined" instead of data.curphase == "undefined"

var a = 1;

if ( typeof a == "undefined" )
  alert (" a is undefined" )

if ( typeof b == "undefined" ) 
  alert (" b is Undefined" )
Eisa
  • 334
  • 3
  • 5
  • `typeof` sounds like a better solution for checking for `undefined`, because it's more stable ([http://stackoverflow.com/a/3390426/1751277](http://stackoverflow.com/a/3390426/1751277)). I didn't thought about it. – floriangosse Feb 19 '17 at 12:10
  • Thanks for this answer, I actually saw the answer below first and used that - it seems to have worked, thanks again though – James Ratliff Feb 19 '17 at 12:22
  • yes `typeof` is more reliable and prevent errors. @floriangosse. your welcome @JRat-UK – Eisa Feb 19 '17 at 12:26
  • try to combine the solution of @Eisa and me to get the most stable checking. – floriangosse Feb 19 '17 at 12:35
  • I'll give that a go! Once my website goes live I'll comment on here so you can see what you helped me do :) – James Ratliff Feb 19 '17 at 12:42
0

If you want to check for an undefined value you shoud use value === undefined instead of value === "undefined", because you checking if curphase is the string "undefined".

Also you don't assign a value to data.fracillum because a comparison (data.fracillum == "0%";) instead of an assignment (data.fracillum = "0%";).

Your condition should look like this:

if (data.curphase === undefined && data.closestphase.phase === "New Moon") {
  data.fracillum = "0%";
} else if (data.curphase === undefined && data.closestphase.phase === "Full Moon") {
  data.fracillum = "100%";
}
floriangosse
  • 1,124
  • 1
  • 8
  • 19