feature_info_2.js

//Create map and vector layer
let map = new OLMap('map', 1, [-96.6345990807462, 32.81890764151014]).map;


//Feature Information on Map Click
map.on('singleclick', function (e) {  
  let url = wmsLayer.getSource().getFeatureInfoUrl(
    e.coordinate,
    map.getView().getResolution(),
    'EPSG:3857', 
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'sovereignt,scalerank,labelrank,type'
    }
  );
  fetch(url)
    .then((response) => response.text())
      .then((json) => {
        map.getOverlays().clear();
    
        let popup = new Overlay(map).overlay;
        popup.setPosition(e.coordinate);
    
        let feature = JSON.parse(json).features;
        if (feature.length) {
          let properties = feature[0].properties;
          let table = document.createElement('table');
        
          Object.entries(properties).forEach((value) => {            
            let tr = document.createElement('tr');

            let td1 = document.createElement('th')            
            td1.style.textAlign = "left";

            let td2 = document.createElement('td')
            td2.style.textAlign = "left";

            td1.innerHTML = value[0];
            td2.innerHTML = value[1];

            tr.append(td1);
            tr.append(td2);
            table.append(tr);
          });
          popup.element.append(table);
        } else {
          map.getOverlays().clear();
        }
      });      
});