How should I properly structure this "if" statement using jQuery?

Question

I've written an if statement that checks if there is a current user and if so, grab that currentUser's profile image url from my DB and place it in a div. I've successfully done so with the following logic:

  function checkLogin() {

    if (Parse.User.current()) {
      var profilePicUrl = Parse.User.current().get("profile_picture").url();

      $(".user-image").css("background-image", "url("+profilePicUrl+")");
    } else {

      $(".user-image").css("background-image", "url(//default image)");
    }
  };

However the issue is, when there is a user that doesn't have a profile image, it throws an error. I've attempted to offset this by adding the following else if statement between the original two:

 function checkLogin() {

    if (Parse.User.current()) {
      var profilePicUrl = Parse.User.current().get("profile_picture").url();

      $(".user-image").css("background-image", "url("+profilePicUrl+")");

    } else if (Parse.User.current() && !profilePicUrl){

      $(".user-image").css("background-image", "url(//default image)");

    } else {

      $(".user-image").css("background-image", "url(//default image)");

    }
  };

Now I'm almost certain I'm using the && operator wrong here, but what I'm trying to say in the middle else if is "if there is a current user & they don't have a profile image ..."

How do I properly state this?

The second case will never be used, because the first case will always be true before it (unless `Parse.User.current()` changes the return value between calls). — Alexander O'Mara, Mar 26 '16 at 07:06
Why just not setting default image for user in DB when it creates ? — 7urkm3n, Mar 26 '16 at 07:09
@7urkm3n how would i go about doing so? I'd love that option — John Durand, Mar 26 '16 at 07:17
it all depends on your back-end. What r u using for back-end? Also @DelightedD0D `js` version should work try his post. — 7urkm3n, Mar 26 '16 at 07:30

score 3 · Accepted Answer · edited Mar 26 '16 at 09:10

3

Actually, since parseObject.get() returns null if the key is not found, all you need here is:

 function checkLogin() {
    if (user = Parse.User.current()) {
      var profilePic = user.get("profile_picture");
      var profilePicUrl = profilePic ? profilePic.url() : "//default image";  
      $(".user-image").css("background-image", "url("+profilePicUrl+")");
    }
  };

Note that the var someVar = someVar ? valueA : valueB; syntax is a Conditional (ternary) Operator

edited Mar 26 '16 at 09:10

7urkm3n

6,054
4
29
46

answered Mar 26 '16 at 07:20

Wesley Smith

19,401
22
85
133

I just wanted to post mine, close to this ) – 7urkm3n Mar 26 '16 at 07:25
this does away with the error, however rather than displaying the default image for a user with no profile image stored, it just shows a blank div – John Durand Mar 26 '16 at 07:29
@JohnDurand have you replaced `//default image` with the actual path to your image? – Wesley Smith Mar 26 '16 at 07:31
change this one `"url(//default image)"` to `"default image url path"` – 7urkm3n Mar 26 '16 at 07:33
@HaykoKoryun no it cant because you still need to call `.url()` on the result of `.get("profile_picture")` but calling it when the value is `null` will thrown an error – Wesley Smith Mar 26 '16 at 07:34
@7urkm3n no, this is the correct syntax see http://stackoverflow.com/questions/512054/setting-background-image-using-jquery-css-property – Wesley Smith Mar 26 '16 at 07:36
@JohnDurand when you look at the console are there any 404 errors for that image? – Wesley Smith Mar 26 '16 at 07:36
1

@DelightedD0D u passing it like this `"url(url(//default image))"` in that case – 7urkm3n Mar 26 '16 at 07:37
@JohnDurand see my update, 7urkm3n pointed out my copy paste mistake :) – Wesley Smith Mar 26 '16 at 07:39
1

No worries, happy coding :) – Wesley Smith Mar 26 '16 at 07:40

score 1 · Answer 2 · answered Mar 26 '16 at 07:08

You need to get the profile pic url before checking it and add a try/catch as a safety net (since I don't know the implementation of current and url methods)

function checkLogin() 
{
    try
    {
      var profilePicUrl = Parse.User.current().get("profile_picture").url();
      if (Parse.User.current() && profilePicUrl) 
      {
        $(".user-image").css("background-image", "url("+profilePicUrl+")");
      } 
      else 
      {
        $(".user-image").css("background-image", "url(//default image)");
      }
    }
    catch(e)
    {
      console.log("unexpected error occured");
      $(".user-image").css("background-image", "url(//default image)");
    }
  };

`.get("profile_picture").url()` will throw an error when get returns `null`, I know you put the try catch there to protect against that, but worth metioning — Wesley Smith, Mar 26 '16 at 07:25
@DelightedD0D yes since implementation of url and current methods are not shared. — gurvinder372, Mar 26 '16 at 07:29

score -1 · Answer 3 · answered Mar 26 '16 at 07:30

try this .....

var profilePicUrl = null;//assign some empty value here...

if (Parse.User.current()) {
      profilePicUrl = Parse.User.current().get("profile_picture").url();   

 } 
if(Parse.User.current() && profilePicUrl ){

     $(".user-image").css("background-image", "url("+profilePicUrl+")");
}
else if (Parse.User.current() && !profilePicUrl){

     $(".user-image").css("background-image", "url(//default image)");

} else {
      $(".user-image").css("background-image", "url(//default image)");
}

`.get("profile_picture").url()` will throw an error when get returns `null` and this is super redundant — Wesley Smith, Mar 26 '16 at 07:41

How should I properly structure this "if" statement using jQuery?

3 Answers3