The Controller of Conversations

Question

The Controller of Conversations

In the HTML code, there is a dialog element with an identification of divMyDialog1. This dialog is connected to a JavaScript class called MyDialog1. Each dialog has its own unique id and associated class name.

 MyDialog1 = function(divStr){
    this.divStr = divStr;
    ...
 }

There are multiple dialogs with their respective classes in the project. The goal is to link each dialog's id with its corresponding class. Some classes may have multiple instances with different div ids.

The question arises: How can this be achieved efficiently?

An approach could look like this:

 let dialogARR = [];
 [{divStr: "divMyDialog1", className: MyDialog1},
 {divStr: "divSomethingElse", className: DialogWibble},
 {divStr: "divPingPong", className: DialogWobble}].forEach(obj => dialogARR.push(new obj.className(obj.divStr)));

javascript class dialog

Answer 1

Answer №1

Iterate over the array, extracting the attributes from each element and then instantiating the class constructor function using new.

dialogArr.forEach(({createElementString, classType}) => new classType(createElementString));

If you require the instances, you can utilize .map() in place of .forEach(), which will output an array containing the instances.

Answer 2

Iterate over the array, extracting the attributes from each element and then instantiating the class constructor function using new.

dialogArr.forEach(({createElementString, classType}) => new classType(createElementString));

If you require the instances, you can utilize .map() in place of .forEach(), which will output an array containing the instances.

Answer 3

Answer №2

One possible solution could be:

class PopUpBox(){
   Constructor(name, content){
       this.name = name;
       this.content = content;
   }
}

Then you can create instances of the PopUpBox class and add them to an array like this:

let popUpBoxes = [];

 [new PopUpBox("box1", "Content for box 1"), new PopUpBox("box2", "Content for box 2")].forEach(box => popUpBoxes.push(box));

This is just one approach you could take, feel free to suggest any improvements.

Answer 4

One possible solution could be:

class PopUpBox(){
   Constructor(name, content){
       this.name = name;
       this.content = content;
   }
}

Then you can create instances of the PopUpBox class and add them to an array like this:

let popUpBoxes = [];

 [new PopUpBox("box1", "Content for box 1"), new PopUpBox("box2", "Content for box 2")].forEach(box => popUpBoxes.push(box));

This is just one approach you could take, feel free to suggest any improvements.

The Controller of Conversations

Answer №1

Answer №2

Similar questions

What is the best way to incorporate a formArray into a formGroup?

PHP: Bootstrap CSS for Carousels

Inheritance of nested directives in Angular.js

Report the error efficiently without terminating the process

Sophisticated filter - Conceal Ancestry

What is the most efficient way to retrieve the key at a specific index within a JavaScript map object?

The drawbacks of using toJS() in React Redux: Is it really necessary in mapStateToProps()?

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Determine the quantity of items currently in an active state

Steps to Hide a Material-UI FilledInput

The absence of shapes in containers is noticeable in the stage setting

"The issue seems to stem from a snippet of compact JavaScript

AngularJs is not responsive to sending POST requests with hidden <input> values

What changes should I make to my save function in order to handle both saving and editing user information seamlessly?

Struggling to handle JSON response in JavaScript

A one-page digital space that functions as a dynamic slide show

Limit the options in jQuery UI auto-complete to search by name from a variety of JSON responses

Whenever I attempt to connect to Stripe, my code fails to execute properly

How can I update getServerSideProps using a change event in Next.js?

Leveraging ng-change in AngularJS when utilizing the "Controller As" syntax