无法将未定义或 null 转换为 object js

Question

I was working with a static.js file and this code worked as long as all keys had a value. I would like to feed in the data from an url. However, I have been unsuccessful in error handling for the "undefined" and "null" values". The error in the console reads:

main.js:14 Uncaught TypeError: Cannot convert undefined or null to object at Function.entries () at SVGPathElement. (main.js:14) at SVGPathElement.handle (jquery-2.2.4.min.js:3) at SVGPathElement.dispatch (jquery-2.2.4.min.js:3) at SVGPathElement.r.handle (jquery-2.2.4.min.js:3)

Below is the main.js code without error handling. I have been reading and trying to implement some of the suggestions on this topic. However, nothings working. One of my attempts is the second code box below. Any suggestions would be appreciated.

        $("path, circle").hover(function(e) {
          // make tooltip visible
          $('#info-box').css('display','block');
          // get year from selector element
          const year = document.querySelector('#myList').value;
          // filter the `data` array for states just in that year
          const filtered = data.filter(d => d.Year == year);
          // filter states of that year to just the one state matching the id of 
          // the path that is being hovered on 
          const state = filtered.filter(d => d.id == $(this).attr('id'))[0];
          // create the html string to populate the tooltip with 
          // as long as the key isn't 'id' then continue building
          let state_html = '';
          Object.entries(state).forEach(([key, value]) => {
            if (key != 'id') {
            state_html += `${key}: ${value}<br>`;
            }
          })
          // change value of tooltip to html we just made
          $('#info-box').html(state_html);
        });
        $("path, circle").mouseleave(function(e) {
          $('#info-box').css('display','none');
        });
        $(document).mousemove(function(e) {
          $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
          $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
        }).mouseover();
        var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if(ios) {
          $('a').on('click touchend', function() {
            var link = $(this).attr('href');
            window.open(link,'_blank');
            return false;
          });
        }
        function getOption() {
          const selectElement = document.querySelector('#myList');
          output = selectElement.value;
          document.querySelector('.output').textContent = output;
        }

    $("path, polyline, polygon").hover(function(e) {
      // make tooltip visible
      $('#info-box').css('display','block');
      // get date from selector element
      const Date = document.querySelector('#myList').value;
      // filter the `data` array for counties just in that date
      const filtered = data.filter(d => d.date == Date);
      // filter counties of that date to just the one county matching the id of 
      // the path that is being hovered on 
      const county = filtered.filter(d => d.id == $(this).attr('id'))[0];
      // create the html string to populate the tooltip with 
      // as long as the key isn't 'id' then continue building
      let county_html = '';
      Object.entries(undefined).forEach(([key]) => {
      if (key != 'undefined' | 'null') {
        county_html += `$(0): $(0)<br>`;
        }
      })
      Object.entries(county).forEach(([key, value]) => {
        if (key != 'id') {
          county_html += `${key}: ${value}<br>`;
        }
      })
      // change value of tooltip to html we just made
      $('#info-box').html(county_html);
    });
    $("path, polyline, polygon").mouseleave(function(e) {
      $('#info-box').css('display','none');
    });
    $(document).mousemove(function(e) {
      $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
      $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
    }).mouseover();
    var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    if(ios) {
      $('a').on('click touchend', function() {
        var link = $(this).attr('href');
        window.open(link,'_blank');
        return false;
      });
    }
    function getOption() {
      const selectElement = document.querySelector('#myList');
      output = selectElement.value;
      document.querySelector('.output').textContent = output;
    }

```

Answer 1

The loop on line 14 of the second file is the source of your error, and probably can just be removed (as I don't see any other object you would want to iterate through):

      // this block can likely be removed
      Object.entries(undefined).forEach(([key]) => {
        if (key != 'undefined' | 'null') {
          county_html += `$(0): $(0)<br>`;
        }
      })

Instead, it looks like you want to check your county object for undefined or null values. That can be done in the loop you have following the unnecessary one:

Object.entries(county).forEach(([key, value]) => {
  if (key !== 'id' && key !== undefined && key !== null) {
    county_html += `${key}: ${value}<br>`;
  }
});