I have encountered an issue while looping through an array of objects. Depending on their type property, I create a different class and append it to an array. However, the problem is that the output always consists of duplicates of the last class created.
// Creating Elements from Content
// Unique id's are generated using UUIDV4.
self._elements = new Array
let e;
self.content.page_data.forEach(cont => {
switch (cont.type) {
case 'paragraph':
e = new Paragraph()
console.log(e.element.id)
self._elements.push(e)
break;
case 'title':
console.log('title')
return
}
})
console.log(self._elements)
Upon troubleshooting, I discovered that the issue lies not with e, as each instance is indeed different. The problem arises once these instances are pushed/added to the array. Specifically, the problem occurs only when instances of Paragraph() are created. Other items in the array, such as text, remain the same but still duplicate the last class.
I would appreciate if someone could clarify what I might be missing here?
EDIT - Class for Paragraph
class Paragraph {
constructor(value = '') {
self._element = template_paragraph.cloneNode(true).content.children[0];
const quil = self._element.children[0].children[1].children[0];
self.quill = new Quill(quil, {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
[{ list: 'ordered' }, { list: 'bullet' }]
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
})
self._element.id = uuidv4()
}
get element() {
return self._element
}
set_content(content) {
// Set quill value
if (!content) return
//self.quill.setContents(content)
}
}
The Quill functionality interacts seamlessly with my cloned HTML elements. Hopefully, this additional information will prove helpful in resolving the issue.