javascript エラー「Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))」の解決方法

作成日 2022.10.19
更新日 2022.10.27
javascript
javascript

javascriptで、エラー「Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))」が発生した場合の原因と解決方法を記述してます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法
5. その他のパターン
- 5.1. mapにオブジェクトを使用

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 107.0.5304.63

Javascript サンプル集はこちら

エラー内容

以下の、「form」の子孫要素を取得しようとした際に発生。
※その他のパターンは後述してます。

<form id="frm">
  <input type="text" id="aaa" name="hoge" />
  <input type="number" id="bbb" name="foo" />
</form>

</div>

<script>

const form = document.getElementById('frm')

Array.from(form.element).forEach(v => {
  console.log(v);
});

</script>

エラーメッセージ

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)

画像

firefox105の場合は、以下のエラーが発生します。

Uncaught TypeError: items is undefined

画像

safari15.5では、以下のエラーとなります。

TypeError: Array.from requires an array-like object - not null or undefined

画像

原因

「HTMLFormControlsCollection」を取得するには「element」ではなく「elements」であるため

解決方法

「elements」を使用する

<form id="frm">
  <input type="text" id="aaa" name="hoge" />
  <input type="number" id="bbb" name="foo" />
</form>

</div>

<script>

const form = document.getElementById('frm')

Array.from(form.elements).forEach(v => {
  console.log(v);
});

</script>

実行結果

その他のパターン

mapにオブジェクトを使用

mapに対してオブジェクトを使用した際にも発生します。

const m = new Map({a:1});
// Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

解決方法は「Symbol.iterator」を制御します。

Object.prototype[Symbol.iterator] = function*(){
    for(var k in this)
        if(this.hasOwnProperty(k))
            yield [k, this[k]]
}

const m = new Map({a:1});

console.log( m.get('a') ); // 1