Hide popup when onclick of map where no features

Question

I am working on a project to display popup using openlayers and geoserver. I have successfully created the script to display the popup. There I used highcharts library to create a chart inside popup overlay. And I have number of legends or markers available inside map [ Geoserver layer].

And I have successfully generated popup when a user clicks on any of the points inside the map. And my problem is that I'm getting a blank popup when clicking on map with no points exists.

I have tried to set conditions when there is no data to parse when clicking and set to popup.hide();.

// map variable
var map = new ol.Map({
    controls: ol.control.defaults({
        attributionOptions:  ({
            collapsible: false // Make the attribution non collapsible
        })
    }).extend([mousePositionControl]),
    target: 'map',
    view: view // Set view
});



/*
  * Add a click handler to the map to render the popup.
*/

/*Attribute popup*/
/*Display the Data in a popup box*/

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);


map.on('singleclick', function(evt) {


   popup.show(evt.coordinate,popup);    

});

Answer 1

did you try

reqwest({        
    url: urlIndia,
    type: 'json',
}).then(function (data) {
    if (data.features.length == 0) {
      popup.hide();
      return;
    }
    for (var i = 0; i < data.features.length; i++) 
    {