無法將未定義或 null 轉換為 object js

Question

我正在使用 static.js 文件，只要所有鍵都有值，此代碼就可以工作。 我想輸入來自 url 的數據。 但是，我對“未定義”和“空”值的錯誤處理沒有成功。控制台中的錯誤顯示：

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

下面是沒有錯誤處理的 main.js 代碼。 我一直在閱讀並嘗試實施有關此主題的一些建議。 但是，沒有任何工作。 我的嘗試之一是下面的第二個代碼框。 任何建議，將不勝感激。

        $("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

第二個文件第 14 行的循環是您的錯誤的來源，並且可能可以被刪除（因為我沒有看到您想要迭代的任何其他 object）：

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

相反，您似乎想檢查您的county object 是否有未定義或 null 值。 這可以在您遵循不必要的循環的循環中完成：

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