Category: JavaScript Answers

Sometimes, we may run into the ‘TypeError: ‘x’ is not iterable’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: ‘x’ is not iterable’ when we’re developing JavaScript apps.

Fix the ‘TypeError: ‘x’ is not iterable’ When Developing JavaScript Apps

To fix the ‘TypeError: ‘x’ is not iterable’ when we’re developing JavaScript apps, we should make sure we’re using the for-of loop on an object that’s iterable like an array, set, map, string, etc.

On Firefox and Chrome, the error message for this error is TypeError: 'x' is not iterable.

On Chrome, the message TypeError: 'x' is not a function or its return value is not iterable is also sometimes shown for this error.

For instance, if we try to iterate through a non-iterable object:

const obj = { 'France': 'Paris', 'England': 'London' };
for (let p of obj) { 
  // ...
}

then we’ll get this error.

Instead, we can use Object.entries to get the key-value pair array and we can use the for-of loop with that:

for (const [country, capital] of Object.entries(obj)) {
  console.log(country, capital);
}

If we’re iterating over a generator function, we should make sure we call it before we iterate through the returned items.

For instance, the following will throw this error:

function* generate(a, b) {
  yield a;
  yield b;
}

for (const x of generate) {
  console.log(x);
}

The function itself isn’t iterable, so we get this error.

Instead, we write:

function* generate(a, b) {
  yield a;
  yield b;
}

for (const x of generate(1, 2)) {
  console.log(x);
}

to iterated through the returned items.

Conclusion

To fix the ‘TypeError: ‘x’ is not iterable’ when we’re developing JavaScript apps, we should make sure we’re using the for-of loop on an object that’s iterable like an array, set, map, string, etc.

On Firefox and Chrome, the error message for this error is TypeError: 'x' is not iterable.

On Chrome, the message TypeError: 'x' is not a function or its return value is not iterable is also sometimes shown for this error.

Sometimes, we may run into the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is read-only’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps, we should make sure that we aren’t trying to assign a value to a property that’s read-only.

On Edge, the error message for this error is TypeError: Assignment to read-only properties is not allowed in strict mode.

On Firefox, the error message for this error is TypeError: "x" is read-only.

And on Chrome, the error message for this error is TypeError: Cannot assign to read only property 'x' of #<Object> for objects and TypeError: Cannot assign to read only property '0' of [object Array] for arrays.

For instance, we shouldn’t write code like:

'use strict';
const obj = Object.freeze({name: 'Elsa', score: 157});
obj.score = 0;  

'use strict';
Object.defineProperty(this, 'COUNT', {value: 2, writable: false});
COUNT = 3;

'use strict';
const frozenArray = Object.freeze([0, 1, 2]);
frozenArray[0]++;

In the first example, we called Object.freeze on the object to make the object read-only, so we can’t assign new values to any top-level properties in it.

In the 2nd exanmple, we make COUNT instance property read-only by setting writable to `false, so we can’t assign a new value to it.

And in the 3rd example, we call Object.freeze on the array to make it read-only, so we can’t change any value in it.

We’ll also get this error if we try to assign a value to read-only properties.

For instance, if we write:

'use strict';
Math.PI = 4;

then we’ll get this error.

To fix this, we write:

'use strict';
const obj = Object.freeze({name: 'Score', points: 157});
obj = {name: obj.name, points: 0};

'use strict';
let COUNT = 2;
COUNT = 3;

In the first example, we can replace the obj variable with a new object to avoid this error.

And in the 2nd example, we can set COUNT to a new value since we used let to declare the variable.

Conclusion

To fix the ‘TypeError: "x" is read-only’ when we’re developing JavaScript apps, we should make sure that we aren’t trying to assign a value to a property that’s read-only.

On Edge, the error message for this error is TypeError: Assignment to read-only properties is not allowed in strict mode.

On Firefox, the error message for this error is TypeError: "x" is read-only.

And on Chrome, the error message for this error is TypeError: Cannot assign to read only property 'x' of #<Object> for objects and TypeError: Cannot assign to read only property '0' of [object Array] for arrays.

Sometimes, we may run into the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps.

In this article, we’ll look at how to fix the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps.

Fix the ‘TypeError: "x" is not a non-null object’ When Developing JavaScript Apps

To fix the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps, we should make sure that we’re calling Object.create, Object.defineProperty and Object.defineProperties with objects that aren’t null.

Also, if we’re using weak maps or weak sets, we should make sure the key we add is an object.

On Edge, the error message for this error is TypeError: Invalid descriptor for property {x}.

On Firefox, the error message for this error is TypeError: "x" is not a non-null object.

And on Chrome, the error message for this error is TypeError: Property description must be an object: "x" and TypeError: Invalid value used in weak set.

For instance, the following code will throw the error:

Object.defineProperty({}, 'key', 1);
Object.defineProperty({}, 'key', null);

On the first line, 1 isn’t a non-null object. In the 2nd line, null isn’t a non-null object.

Instead, we write:

Object.defineProperty({}, 'key', { value: 'foo', writable: false });

to add a property key to the empty object with value 'foo' and make it read-only with writable set to false.

Also, if we’re using weak maps or weak sets, we should make sure the key we add is an object.

For instance, we’ll get the error if we write:

const ws = new WeakSet();
ws.add('foo');

since 'foo' isn’t a non-null object.

Instead, we write:

ws.add({foo: 'bar'});

to add an object into the set.

Conclusion

To fix the ‘TypeError: "x" is not a non-null object’ when we’re developing JavaScript apps, we should make sure that we’re calling Object.create, Object.defineProperty and Object.defineProperties with objects that aren’t null.

Also, if we’re using weak maps or weak sets, we should make sure the key we add is an object.

On Edge, the error message for this error is TypeError: Invalid descriptor for property {x}.

On Firefox, the error message for this error is TypeError: "x" is not a non-null object.

And on Chrome, the error message for this error is TypeError: Property description must be an object: "x" and TypeError: Invalid value used in weak set.

Sometimes, we want to iterate through all attributes in an HTML element with JavaScript.

In this article, we’ll look at how to iterate through all attributes in an HTML element with JavaScript.

Iterate Through All Attributes in an HTML Element with JavaScript

To iterate through all attributes in an HTML element with JavaScript, we can loop through the attributes property of the element with the for-of loop.

For instance, if we have the following element:

<div style='width: 100px' class='foo' id='bar'>

</div>

Then we can loop through the attribute values of it by writing:

const elem = document.querySelector('div')
for (const a of elem.attributes) {
  console.log(a.name, a.value);
}

We select the div with:

const elem = document.querySelector('div')

Then we use the for-of loop with the elem.attributes value.

We get the name property to get attributer name, and the value property returns the attribute value.

So we get:

'style' 'width: 100px'
'class' 'foo'
'id' 'bar'

from the console log.

Conclusion

To iterate through all attributes in an HTML element with JavaScript, we can loop through the attributes property of the element with the for-of loop.

Sometimes, we want to get the current location of an iframe with JavaScript.

In this article, we look at how to get the current location of an iframe with JavaScript.

Get the Current Location of an iframe with JavaScript

To get the current location of an iframe with JavaScript, we can use the src property of the select element object to get the location of the iframe selected.

For instance, if we have the following iframe:

<iframe src='https://google.com'>

</iframe>

Then we write:

console.log(document.querySelector("iframe").src)

to log the value of the src property of the iframe.

We select the iframe with document.querySelector("iframe").

Therefore, from the console log, we should see that the value is 'https://google.com/'.

Conclusion

To get the current location of an iframe with JavaScript, we can use the src property of the select element object to get the location of the iframe selected.