Using Jquery to display JSON data from API - showing undefined

Question

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>"
  );
}

Eisa · Accepted Answer · 2017-02-19 11:57:14Z

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" )

answered Feb 19, 2017 at 11:57

Eisa

3743 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

floriangosse Over a year ago

typeof sounds like a better solution for checking for undefined, because it's more stable (http://stackoverflow.com/a/3390426/1751277). I didn't thought about it.

James Ratliff Over a year ago

Thanks for this answer, I actually saw the answer below first and used that - it seems to have worked, thanks again though

Eisa Over a year ago

yes typeof is more reliable and prevent errors. @floriangosse. your welcome @JRat-UK

floriangosse Over a year ago

try to combine the solution of @Eisa and me to get the most stable checking.

James Ratliff Over a year ago

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 :)

floriangosse · Accepted Answer · 2017-02-19 12:03:02Z

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%";
}

answered Feb 19, 2017 at 12:03

floriangosse

1,1331 gold badge10 silver badges22 bronze badges

1 Comment

James Ratliff Over a year ago

I used this and it seems to have worked perfectly thanks!

Collectives™ on Stack Overflow

Using Jquery to display JSON data from API - showing undefined

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related