title: I Cant return image I want when value is null
body: <p>Im trying to return a default image if the image i'm pulling from my api is null,
  but anything I put wont return my default/placeholder image, I tried null, void, false, etc, nothing works, and when I put value = "", it displays my default image even when its not null,</p>
  
  <p>what json looks like <a href="https://i.stack.imgur.com/cV0KR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cV0KR.jpg" alt="json from api"></a></p>
  
  <p>Area im trying to get working from app3.js//////////////////////////////////////////////////////////////////////////////////</p>
  
  <pre><code> var $img2 = $("&lt;img /&gt;").attr('src', data2.events["1"].performers["0"].image );
  
      var userImage = $("&lt;img /&gt;").attr("src","https://imagemagick.org/image/gradients/linear_gradient.png");
  
           var $imgnew = ($img2, (key, value) =&gt; {
    if (value ===  null) {
      return userImage;
  
    }
    return value;
  }
  )  
  
  $('#img2').append($imgnew);
  </code></pre>
  
  <p>Full json /////////////////////</p>
  
  <pre><code>{meta: {…}, in_hand: {…}, events: Array(10)}
  meta: {geolocation: null, per_page: 10, total: 14, took: 4, page: 1}
  in_hand: {}
  events: Array(10)
  0: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5055747, …}
  1:
  links: []
  event_promotion: null
  conditional: false
  is_open: false
  id: 5161557
  stats: {visible_listing_count: null, dq_bucket_counts: null, average_price: null, lowest_sg_base_price_good_deals: null, lowest_price_good_deals: null, …}
  title: "Amarillo Venom at Salina Liberty"
  announce_date: "2019-12-21T00:00:00"
  score: 0.361
  access_method: null
  announcements: {}
  taxonomies: (2) [{…}, {…}]
  type: "football"
  status: "normal"
  description: ""
  datetime_local: "2020-03-21T13:00:00"
  visible_until_utc: "2020-03-21T22:00:00"
  time_tbd: false
  date_tbd: false
  performers: Array(2)
  0: {image: null, primary: true, colors: null, images: {…}, has_upcoming_events: true, …}
  1: {image: null, colors: null, images: {…}, has_upcoming_events: true, id: 114910, …}
  length: 2
  __proto__: Array(0)
  url: "https://seatgeek.com/amarillo-venom-at-salina-liberty-tickets/football/2020-03-21-1-pm/5161557"
  created_at: "2019-12-21T16:00:49"
  popularity: 0.46
  venue: {links: Array(0), metro_code: 678, postal_code: "67401", timezone: "America/Chicago", has_upcoming_events: true, …}
  enddatetime_utc: null
  short_title: "Amarillo Venom at Salina Liberty"
  datetime_utc: "2020-03-21T18:00:00"
  datetime_tbd: false
  __proto__: Object
  2: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5161560, …}
  3: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251570, …}
  4: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251569, …}
  5: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251400, …}
  6: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251566, …}
  7: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251567, …}
  8: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251568, …}
  9: {links: Array(0), event_promotion: null, conditional: false, is_open: false, id: 5251565, …}
  length: 10
  __proto__: Array(0)
  __proto__: Object
  </code></pre>
  
  <p>Full app3.js ////////////////////////////////////////////////////////////////////////</p>
  
  <pre><code>function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo4");
  
  
  
              var list = 'boston';
              var list2 = 'celtics';
  
                              $.getJSON("https://api.seatgeek.com/2/events?q="+x+"&amp;client_id=MjA1NTgxMTN8MTU4MDY3MjIzNy43OQ", function(data2) {
  
  
          //        events["0"].performers["0"].image
  
  
                    var $img = $("&lt;img /&gt;").attr('src', data2.events["0"].performers["0"].image);
  
                    var $img2 = $("&lt;img /&gt;").attr('src', data2.events["1"].performers["0"].image );
  
         //         var $img = $("&lt;img /&gt;").attr('src', data2.events.performers[0].images.huge); 
  
                             //     events[1].performers[""0""].image
  
                  var list3 = data2.events;
  
                  var event2 = list3.title;                
  
  
  
                  var list5 = data2.events["0"].title;    
  
                   var price1 = data2.events["0"].stats.average_price;                
  
  
  //                var list5new = list5 + " " + price1;                
  
  
                  var list6 = data2.events["1"].title;                 
  
                  var price2 = data2.events["1"].stats.average_price;                  
  
  //                var list6new = list6 + " " + price2;
  
  
  
                  var list7 = data2.events["2"].title;
  
                   var price3 = data2.events["0"].title;                 
  
  
  
  
                   var buy = data2.events["0"].url;
  
  
                   var buy3 = data2.events["1"].url;    
  
         //         console.log(href);
  
  
  //                 var str = "Free Web Building Tutorials!";
     var buy2 = buy.link(data2.events["0"].url);                
  
     var buy4 = buy3.link(data2.events["0"].url);                              
  
  
  
  
                  var hi = 'NA'     
  
      var newlink = (JSON.stringify(list5, (key, value) =&gt; {
    if (value === undefined) {
      return hi;
  
    }
    return value;
  } 
  ))     
  
  
  //    if (list5.value === "undefined"){
  //    console.log('the property is not available...'); // print into console
  //}
  
  
  //                                
  //  if (typeof list5 === "undefined") {
  //    txt = "x is undefined";
  //      
  //    console.log('nada')  
  //  } else {
  //    txt = "x is defined";
  //  }                                
  //                                
            // var userImage = "https://imagemagick.org/image/gradients/linear_gradient.png"; 
  
                           //      var userImage2 = "https://imagemagick.org/image/gradients/linear_gradient.png"; //
      var userImage = $("&lt;img /&gt;").attr("src","https://imagemagick.org/image/gradients/linear_gradient.png");
  
           var $imgnew = ($img2, (key, value) =&gt; {
    if (value.getAttribute('src') == "") {
      return userImage;
  
    }
    return value;
  } 
  )                    
  
  
                  var hi = 'NA'
  
      var link1 = (JSON.stringify(price1, (key, value) =&gt; {
    if (value === null) {
      return hi;
  
    }
    return value;
  } 
  ))
  
                      var hi = 'NA'
  
      var link2 = (JSON.stringify(price2, (key, value) =&gt; {
    if (value === null) {
      return hi;
    }
    return value;
  } 
  ))
        //          console.log(list3)
  
            //      console.log(list5new)  
                  console.log(data2)  
  
  
                   $("#demo4").append(list5 + " - " + "Price" + " " + link1 );
                   $("#link").append( buy2);                
                   $("#demo5").append(list6 + " - " + "Price" + " " + link2);                
                   $("#link2").append(buy4);
                   $('#img1').append($img);
                   $('#img2').append($img2);    
               //        $('#img3').append(userImage);                                  
  
                   $(document).ready(function(){
  
  //                                                 $("p").click(function(){
  //    alert("The paragraph was clicked.");    
  //
  //                                                 });
              if( $("#demo4").css('display') == 'none')  {
              $("#error").show();
          }
  
                  });
  
                  $(document).ready(function(){
  
              if( $("#demo4").css('display')) {
              $("#error").hide();
          }
  
  
              $("button").click(function(){
              $("#error").hide();
    });
                  });
  
  });
  //            $.getJSON("https://api.seatgeek.com/2/events?q=boston+celtics&amp;client_id=MjA1NTgxMTN8MTU4MDY3MjIzNy43OQ", function(data2) {
  //    //data is the JSON string 
  //                console.log(data2);
  //});
  
  }
  </code></pre>
  
  <p>Html //////////////////////////////////////////////////////</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Event finder&lt;/title&gt;
    &lt;link rel="stylesheet" href="style2.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt; &lt;/script&gt;     
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  
  
   &lt;div id="top"&gt; 
      &lt;h2&gt;FindYourTickets&lt;/h2&gt;
  
      &lt;br&gt;
  
      &lt;h2 class="hi"&gt;Get Started here&lt;/h2&gt;
      &lt;br&gt;
      &lt;/div&gt;
     &lt;br&gt;
      &lt;div class="center"&gt;
  
  &lt;!--        &lt;h2&gt;City&lt;/h2&gt;--&gt;
              &lt;input id="myInput2" type="text" placeholder="City(Optional)"&gt;
  
      &lt;br&gt;    
  &lt;!--        &lt;h2&gt;Search&lt;/h2&gt;--&gt;
  
      &lt;br&gt;
  
  
  
  
    &lt;input type="text" id="myText" placeholder="Search" value=""&gt;
  
  &lt;p&gt;&lt;/p&gt;
  
  &lt;button class="button" onclick="myFunction()"&gt;&lt;h2&gt;Search&lt;/h2&gt;&lt;/button&gt;    
  
  
  
  
      &lt;br&gt;
      &lt;br&gt;
  
      &lt;button class="button"&gt;&lt;a href="index3.html"&gt;&lt;h2&gt;Clear&lt;/h2&gt;&lt;/a&gt;&lt;/button&gt;
  
  
  
  
  
  
      &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;!--
  &lt;div id="myDIV"&gt;
    &lt;p&gt;I am a paragraph.&lt;/p&gt;
    &lt;div&gt;I am a div element inside div.&lt;/div&gt;
    &lt;button&gt;I am a button&lt;/button&gt;
    &lt;button&gt;Another button&lt;/button&gt;
    &lt;p&gt;Another paragraph.&lt;/p&gt;
  &lt;/div&gt;
  --&gt;
  
  
      &lt;!-- &lt;div class="main"&gt;
      &lt;div class="header"&gt;
        &lt;h1&gt;OpenWeatherMap API&lt;/h1&gt;
        &lt;p&gt;Enter any city name in the input box below to get the data&lt;/p&gt;
      &lt;/div&gt; --&gt;
  
  &lt;!--
     &lt;button type="button" onclick="alert('Hello world!')"&gt;Click Me!&lt;/button&gt;
  &lt;h1 class="name2" id="name2"&gt;hi&lt;/h1&gt;  
  --&gt;
  
  &lt;script src="app3.js"&gt;&lt;/script&gt;
  
  &lt;!--
  &lt;h1&gt;This is a Heading&lt;/h1&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;  
  --&gt;
  
  &lt;!--     &lt;div id="img3"&gt;&lt;/div&gt;--&gt;
      &lt;div id="wrapper"&gt;
      &lt;div id="error"&gt; &lt;h4&gt;No results&lt;/h4&gt;&lt;/div&gt;
   &lt;div id="demo4"&gt;&lt;/div&gt;   
     &lt;div id="link"&gt;&lt;/div&gt;
  
          &lt;div id="img1"&gt;&lt;/div&gt;
  
          &lt;br&gt;
          &lt;br&gt;
             &lt;br&gt;
          &lt;br&gt;
  
          &lt;div id="demo5"&gt;&lt;/div&gt;  
    &lt;div id="link2"&gt;&lt;/div&gt;
  
          &lt;div id="img2"&gt;&lt;/div&gt;
  
  
  
      &lt;span class = "my_class"&gt;&lt;/span&gt;
  
  
  
  
            &lt;ul id="result2"&gt; &lt;/ul&gt; 
  
  
  
      &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>