Почему в консоли вылезает ошибка в консоли TypeError: Cannot read property '' of null, если перебирать многомерный массив и обращаться к его элемента?

Question

SpeakeazyYT1 @SpeakeazyYT1

JavaScript

Почему в консоли вылезает ошибка в консоли TypeError: Cannot read property '' of null, если перебирать многомерный массив и обращаться к его элемента?

Добрый вечер. Есть следующий код:

var bindings = {
	'ios': 'Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3'
};

var OS_VERSION = "7.0.5",
	BROWSER = "Chrome";

var EmulatorDeviceData = [
	{
		"ID": "ios", "NAME": "iPhone XS", "UA": "Mozilla\/5.0 (iPhone; CPU iPhone OS "+OS_VERSION+" like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/12.0 Mobile\/15E148 "+BROWSER+"\/605.1 NAVER(inapp; search; 591; 8.8.8; XS)", "OC": "ios"
	},
	{
		"ID": "54", "NAME": "iPhone XS Max", "UA": "Mozilla\/5.0 (iPhone; CPU iPhone OS "+OS_VERSION+" like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/12.0 Mobile\/15E148 "+BROWSER+"\/605.1 NAVER(inapp; search; 591; 8.8.8; XSMAX)", "OC": "ios"
	},
	{
		"ID": "52", "NAME": "iPhone XR", "UA": "Mozilla\/5.0 (iPhone; CPU iPhone OS "+OS_VERSION+" like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/12.0 Mobile\/15E148 "+BROWSER+"\/605.1 NAVER(inapp; search; 591; 8.8.8; XR)", "OC": "ios"
	},
	{
		"ID": "37", "NAME": "iPhone X", "UA": "Mozilla\/5.0 (iPhone; CPU iPhone OS "+OS_VERSION+" like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/12.0 Mobile\/15E148 "+BROWSER+"\/604.1", "OC": "ios"
	},
	{
		"ID": "24", "NAME": "iPhone 8", "UA": "Mozilla\/5.0 (iPhone; CPU iPhone OS "+OS_VERSION+" like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) CriOS\/69.0.3497.105 Mobile\/15E148 "+BROWSER+"\/605.1", "OC": "ios"
	},
	{
		"ID": "25", "NAME": "iPhone 8 Plus", "UA": "Mozilla\/5.0 (iPhone; CPU iPhone OS "+OS_VERSION+" like Mac OS X) AppleWebKit\/605.1.15 (KHTML, like Gecko) Version\/12.0 Mobile\/15E148 "+BROWSER+"\/604.1", "OC": "ios"
	}
];

console.log(EmulatorDeviceData);

window.addEventListener('load', function(e) {
  /*for (var key in bindings) {
	console.log(bindings[key]);
    document.querySelector('webview[data-name="' + key + '"]').
        setUserAgentOverride(bindings[key]);
  }*/
  for (var key in EmulatorDeviceData) {
	console.log(EmulatorDeviceData[key]);
    document.querySelector('webview[data-name="' + EmulatorDeviceData[key].ID + '"]').setUserAgentOverride(EmulatorDeviceData[key].UA);
  }
});

В консоли вылазит ошибка:

Uncaught TypeError: Cannot read property 'setUserAgentOverride' of null
    at browser_bindings.js:162

Если использовать закомментированный код, то всё работает.
Вот массив, который перебирается в закомментированном коде.

Причём, проблема такая, если перебирать массив EmulatorDeviceData

Помогите пожалуйста разобраться!

P.S: html страница:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/browser.css">
    <script src="scripts/config.js"></script>
    <script src="scripts/browser_bindings.js"></script>
    <script src="scripts/browser.js"></script>
  </head>
  <body>
    <div id="controls">

      <button id="back" title="Go Back">&#9664;</button>
      <button id="forward" title="Go Forward">&#9654;</button>
      <button id="home" title="Go Home">&#8962;</button>
      <button id="reload" title="Reload">&#10227;</button>

      <form id="location-form">
        <div id="center-column">
          <input id="location" type="text" value="http://www.google.com/">
        </div>
        <input type="submit" value="Go">
      </form>

      <button id="zoom" title="Change Zoom">&#128270;</button>
      <button id="find" title="Find in Page">&#128294;</button>

    </div>

    <div id="zoom-box">
      <form id="zoom-form">
        <input id="zoom-text" type="text">
        <input type="submit" value="&#128270;">
        <button id="zoom-in">&#10133;</button>
        <button id="zoom-out">&#10134;</button>
      </form>
    </div>

    <div id="find-box">
      <form id="find-form">
        <input id="find-text" type="text">
        <div id="find-results">
          <span class="results" data-name="android"></span> |
          <span class="results" data-name="ios"></span> |
          <span class="results" data-name="nokia"></span> |
          <span class="results" data-name="bb-playbook"></span>
        </div>
        <input type="submit" style="position:absolute; visibility:hidden">
        <button id="match-case">aA</button>
        <button id="find-backward">&#60;</button>
        <button id="find-forward">&#62;</button>
      </form>
    </div>

    <!-- Content contains containers for several webviews with different
    user-agent strings. The `src` attribute is set via scripting. Each
    webview lives in a different persistent partition to ensure that one is
    rendered in its own process (see
    https://developer.chrome.com/apps/tags/webview#partition for
    details). -->

    <div class="content-container">
      <div class="webview-container" data-name="ios" data-width="1.0"
           data-height="1.0" data-loading="">
        <webview id="ios-webview" class="webview" data-name="ios"
                 partition="persist:ios"></webview><!--
        Comment-out whitespace
        --><div class="sad-webview" data-name="ios">
          <div class="sad-webview-icon">&#9762;</div>
          <h2 class="crashed-label">Aw, Snap!</h2>
          <h2 class="killed-label">He's Dead, Jim!</h2>
          <p>Something went wrong while displaying this webpage.
            To continue, reload or go to another page.</p>
        </div><!--
        Comment-out whitespace
        --><div class="webview-overlay" data-name="ios">&nbsp;</div>
      </div><!--
      Comment-out whitespace
      --><div id="content-overlay">&nbsp;</div>
    </div>

  </body>
</html>

Вопрос задан более трёх лет назад
158 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

3 комментария

Sp1keazyYT @Sp1keazyYT

Зачем? Если нет такого data-name, то ищем дальше элементы удовлетворяющие селектору, в данном случае в data name стоит ios и в массиве тоже есть ios, код должен работать правильно

Написано более трёх лет назад
titelhalter @titelhalter
Sp1keazyYT, Потому что код выполняет последовательно все операции, которые Вы ему задали. В js пока нет optional chaning, чтобы игнорировать обращения к методам/свойствам, если они отсутствую в объекте. Ваш алгоритм сейчас работает буквально так: перебираем массив, из каждого элемента берем id, ищем с помощью querySelector DOM элемент, (querySelector вернет либо найденный элемент, либо null, если такого нет), у полученного результата вызовем метод setUserAgentOverride. У null в прототипе такого метода естественно нет, вот скрипт и падает с ошибкой. Соответственно, в зависимости от целей, Вам нужно либо проверять наличие нужного DOM узла, примерно так
const node = document.querySelector(selector); if (node != null) { node.setUserAgentOverride(data) }

либо вызывать break после первого найденного, либо еще что-то.
Но вообще, скорее всего, Вам и не нужно перебирать весь массив. Например, если Вам нужно найти элемент в массиве, с id которого Вы сможете найти DOM элемент, то достаточно воспользоваться методом Array.prototype.find.
Написано более трёх лет назад
Stockholm Syndrome @StockholmSyndrome
Если нет такого data-name, то ищем дальше элементы удовлетворяющие селектору

где вы в своём коде видите проверку на существование элемента?

for (var key of EmulatorDeviceData) { const elem = document.querySelector('webview[data-name="' + EmulatorDeviceData[key].ID + '"]'); if (elem) { elem.setUserAgentOverride(EmulatorDeviceData[key].UA); break; } }
Написано более трёх лет назад