Assign a "complicated" HTML structure to a JavaScript variable

November 19, 2021

I’m trying to scrape a website which has a structure like this:

var elems = document.getElementsByClassName("breakfast");
elems = [...elems] // Converts HTMLCollection to Array
elems = elems.map(elem => elem.children[0])
elems = elems.filter(elem => elem !== undefined)
elems = elems.map(elem => elem.getAttribute("title"))

document.write(elems)

<div class="breakfast">
<p title="1">Bagels</p>
</div>

<div class="breakfast">
</div>

<div class="breakfast">
<p title="2">Bread</p>
</div>

<div class="breakfast">
<p title="3">Toast</p>
</div>

<div class="breakfast">
</div>

The above Javascript works just fine, but I want the undefined values, instead of them not showing up, I want them to be 0.

My first thought was to use the ternary operator, I, however, do not know how to make a new HTML-element where elements such as the children or the attributes are accessible. I know of HTMLParagraphElement, the documentation is sadly not enough for me to figure out how to do this.

>Solution :

Use optional chaining

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

and

nullish coalescing operator

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

var elems = [...document.querySelectorAll(".breakfast")];
elems = elems.map(elem => elem.children[0])
// elems = elems.filter(elem => elem !== undefined)
elems = elems.map(elem => elem?.getAttribute("title") ?? 0)

document.write(elems)

<div class="breakfast">
<p title="1">Bagels</p>
</div>

<div class="breakfast">
</div>

<div class="breakfast">
<p title="2">Bread</p>
</div>

<div class="breakfast">
<p title="3">Toast</p>
</div>

<div class="breakfast">
</div>