JavaScript Instantiate new Object with dynamic parameter from String

Question

I would like to instantiate a new object with dynamic parameters coming from an external String.

Here is the code:

const editorInstance = new Editor('#edit',
  {
    placeholderText: null,
    theme: 'dark',
    language: 'en',
    linkList:[{text: 'test',href: 'test',target: '_blank'}],
    events: {
      initialized: function () {
        const editor = this

        this.el.closest('form').addEventListener('submit', function (e) {
          jQuery('#gs_editor_content').hide();
          jQuery(this).append('<div class="loadingDiv">&nbsp;</div>');
          o.script
        });

        texta = jQuery('#myeditor').find('textarea');
        targetFile = texta.attr('rel');
        content = editor.$oel.val();

        e.preventDefault();

        var fd = new FormData(); 
        fd.append( 'name' ,targetFile);
        fd.append( 'html', editor.$oel.val() );
        $.ajax({
          url : 'http://localhost/Update',
          type : 'POST',
          data: fd,
          processData : false,
          contentType : false,
          async : false,
          success : function(data, textStatus, request) {}
        });

        jQuery('#myeditor').dialog("close");

      }
    }
  }
)

I would need to modify the parameters linkList before instantiating my object as I receive a new list received from my server.

I tried to use eval or parseFunction but I encounter an unexpected identifier error.

any idea how I can achieve this ?

EDIT

I really need to update the parameter before creating the Object, which is not the same thing as mentioned in the question suggested as duplicate. By the way I also need to create my object after updating the parameter...

EDIT 2

I also tried to simply include my var containing the String but it doesn't work:

var dropdownFiles = "[{text: 'test',href: 'test',target: '_blank'}]";
const editorInstance = new Editor('#edit',
  {
    placeholderText: null,
    theme: 'dark',
    language: 'en',
    linkList:dropdownFiles,
    events: {
    .....

Answer 1

If I understood your problem right, you're trying to update the linkList before including it to your new object?

If that's the situation, you could use something promise based, as fetch to fetch your data: Using Fetch by MDN documentation. You're already using JS Classes, so I'm sure you are already aware Browser compatibility or using Babel (If browser compatibility is important for you).

If you prefer using jQuery AJAX for fetching data, you could use async await to update linkList before your software instantiates the object. MDN Documentation for Async Await.

In this case, you could do something like this:

async function getData(paramIfNeeded) {
  var linkListData = await linkListFunction(paramIfNeeded2);
  return linkListData
}

function linkListFunction(paramIfNeeded2){
  //Your favourite data fetching function
}

getData().then((result) =>{
  var linkList = result;
  //instanciate the object
});

If you prefer ES 2015, something like this could be done:

function callData(){
  getData(paramIfNeeded)
  .then(result => {
    linkListFunction(paramIfNeeded2)
    .then( result => {
      //do things with linkList
    });
  });
}

I hope, this helps.

Answer 2

There is no problem in change a value before the instantiation. The problem here, as I understand, is that you have an invalid JSON, see this https://json.org/. If you have control over the server response, you should send a valid JSON, otherwise, you should parse the string. As you say in comments, you have something like:

"[{text: 'script1.pdf',href: 'null',target: '_blank'}{text: 'script2.pdf',href: 'null',target: '_blank'}{text: 'script3.pdf',href: 'null',target: '_blank'}]"  

if you can change the server response, turn that into somethig like:

'[{"text": "script1.pdf","href": "null","target": "_blank"},{"text": "script2.pdf","href": "null","target": "_blank"},{"text": "script3.pdf","href": "null","target": "_blank"}]'

and then:

class Editor {
    constructor(array){ 
        this.linkList = array;
    }
}

const json = '[{"text": "script1.pdf","href": "null","target": "_blank"},{"text": "script2.pdf","href": "null","target": "_blank"},{"text": "script3.pdf","href": "null","target": "_blank"}]';
 
const array = JSON.parse(json).map(e=>{e.target="_self"; return e;});

//You could change what you want before the new instance
const e = new Editor(array);

console.log(e);

Answer 3

The problem is probably caused by async. your class is initializing before the response received from your server. You need to initializing class after the response received.

For example

const editorInstance = new Editor("#edit", {
 placeholderText: null,
 theme: "dark",
 language: "en",
 linkList: serverExample() // undefined
});

function serverExample() {
 setTimeout(() => {
  return [
   { text: "test", href: "test", target: "_blank" },
   { text: "test2", href: "test", target: "_blank" }
  ];
 }, 3000);
}