I have a JSON file that stores an array of objects. In the object, I have a property named url
that stores the URL to a YouTube video. Once I fetch the JSON file and loop over the objects I am creating an <iframe>
that sets the src
to the url
property. Here is the method I am using:
const update = (information, selector) => {
const parent = document.querySelector(selector);
if (!information) {
const rootParent = parent.parentNode;
rootParent.remove();
return
}
parent.querySelector('h4').innerText = information.title;
parent.querySelector('h6').innerText = information.dateFormatted;
const iframe = document.createElement('iframe');
iframe.setAttribute('height', '315');
iframe.setAttribute('width', '560');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('src', information.url);
parent.appendChild(iframe);
}
The issue is that the first call to the method works fine, but after the second iteration when it makes the call again it fails on the parent.appendChild
line.
If I setup a try/catch and setup a breakpoint in the catch, the catch never gets fired. It isn’t even being hit if I add a debugger
statement to it.
What could be causing this and more importantly, why isn’t the debugger being triggered?