Trying to get array to log if its empty to the console

Question

I am working with a map and data. When you click on a state, it pulls the appropriate data from the JSON and displays the stores in an unordered list. If a state does not have data (Wyoming is one for example), it should be logging to the console that it is empty. So when you click on Wyoming, it should realize the array is empty and log that its empty to the console.

$("#paginateView").hide();
$("#stateButton").hide();

$("#mapWhereToBuy").usmap({  
 click: function(event, data) {
      $.ajax({        
   url: 'https://165.227.69.79:8443/alanric/armaster/state/' + data.name + '?callback=functionCall',  
      dataType: "jsonp",   
   cache: true,  
      jsonpCallback: "functionCall",
   success: function(json){  
    
      console.log(json); 
       
      var storeNames = '<ul class="list-group">';  
      $.each(json, function (i, item) {  
       var stores = item.cname;
       if (stores && stores.length) { 
          storeNames += '<li class="content list-group-item">' + stores + '</li>'; 
       } else {
        console.log("Sorry, we do not carry products in your state.");
       } 
      });  
      storeNames +='</ul>';  
    
      $('#clicked-state').html(storeNames);
      $("#paginateView").show(); 
      $("#stateButton").show();
      $("#stateButton").html('You Selected:' + ' ' +  data.name); 
    
      pageSize = 15; 
 
      showPage = function(page) {
     $(".content").hide(); 
     $(".content").each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
       $(this).show();
     });        
      }
 
      showPage(1);

      $("#paginateView li a").click(function() { 
     $("#paginateView li a").removeClass("current");
     $(this).addClass("current");
     showPage(parseInt($(this).text()))  
      });  
    
   }   
    }); 
    
 }              
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.cento.com/js/raphael.js"></script>
<script src="https://www.cento.com/js/jquery.usmap.js"></script>
<div id="mapWhereToBuy"></div>

<h1>Search By State</h1>
<h4>Click on a state to see store locations</h4>
<hr>
<div id="clicked-state"></div>

This part looks backwards `} else if (json.length > 0) { console.log("Sorry, we do not carry products in your state.");` — zer00ne, Nov 10 '17 at 18:04
i just fixed that i updated it but it still wont work. i dont understand why if the array is empty i cant get it to log to the console. — Tom, Nov 10 '17 at 18:05
There are certain Array methods that do not recognize empty arrays like `map()` so run your array through it. `map()` always returns something so: `var result = array.map()` `console.log(result)` `// null` if there's anything in that array `map()` will return it. — zer00ne, Nov 10 '17 at 18:08

score 0 · Answer 1 · answered Nov 10 '17 at 18:12

0

I was able to get it to work by using this "json.length === 0". If there is a better alternative please let me know thanks!

answered Nov 10 '17 at 18:12

Tom

305
1
3
15

That's easier but it should be ok since you probably don't have [nulls, deleted elements, or falsy values](https://stackoverflow.com/a/281335/2813224) in your JSON. – zer00ne Nov 10 '17 at 18:44

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Some Array methods do not recognize empty arrays, like map(). But map() will always return something even an empty array. First example is .map() with an array of numbers the second example is with an empty array.

Demo

var array1 = [];
var result1 = array1.map(function(obj, idx) {
  var ID = idx;
  return idx;
});
console.log(result1);


var array2 = [0, 0, 1];
var result2 = array2.map(function(obj, idx) {
  var ID = idx;
  return idx;
});
console.log(result2);

Trying to get array to log if its empty to the console

2 Answers2

Demo