Passing object and function names in JavaScript

Question

i've created an object that contains the names of several objects and the names of functions associated with creating new objects, in this case, charts.

var oCharts = [{
    nchart: "chart1",
    fchart: "makeChart1"
  },
  {
    nchart: "chart2",
    fchart: "makeChart2"
  },
  {
    nchart: "chart3",
    fchart: "makeChart3"
  }
]

"nchart" is the variable representing the chart to be destroyed. "fchart" is the variable representing the function to create a new chart.

If i do it manually, like this, it works

if(typeof chart1 != undefined ){
  chart1.destroy();
  makeChart1();         
}

If i iterate over oCharts, it doesn't work. I get "Object doesn't support property or method 'destroy'" and, of course, it never gets far enough to run makeChart(). (i'm not even sure I'm calling that correctly.)

$(oCharts).each(function(i,v){
  var myChart = [this.nchart];
  var makeChart = this.fchart;

  if(typeof myChart != undefined ){
    myChart.destroy();
    makeChart();            
  }
});

the functions to make charts are simply...

function makeChart1(){
 // do stuff
}

function makeChart2(){
 // do other stuff
}

function makeChart3(){
 // do different stuff
}

Can someone please tell me what I'm doing wrong? It would be very much appreciated!

How are the functions defined ? If will have to evaluate dynamically using eval to invoke the functions by the string instead of its reference which is a bad idea. You are running into the error as you are using () on a string typeof myChart is a string and only functions have the properties to invoke it — Sushanth --
– Sushanth --, Commented Apr 24, 2019 at 18:23
the charts are made using chart.js. chart1.destroy() is how you destroy them to create a new one with the same ID. — Chris G.
– Chris G., Commented Apr 24, 2019 at 18:29
Your expression typeof myChart != undefined always will be true because typeof variable always return string type and you should compare it with stringified value of undefined i.e. typeof myChart !== 'undefined' Also, before this expression you create a variable ` var myChart = [this.nchart]; ` typeof myChart always will return 'object'. To prevent you need just assign this.nchart to myChart — Sergey Volkov
– Sergey Volkov, Commented Apr 24, 2019 at 19:15
Apologies, Sergey. But, if myChart has not been created yet, typeof myChart will be undefined, and, therefore, cannot be destroyed. I'm trying to pass the ID of the chart into the condition and, if the object with that ID is defined, then destroy it. — Chris G.
– Chris G., Commented Apr 24, 2019 at 19:26

Alex Ciu · Accepted Answer · 2019-04-24 19:29:03Z

1

i'm sure this can be done in a smarter way but this should work on your example: i assume chart1, chart2, chart3 are chart instances already created as var chart1 = new Chart(ctx, config)

$(oCharts).each(function(i,v){
  var myChart = this.nchart;
  var makeChart = this.fchart;

  if( myChart == "chart1" ){
    chart1.destroy();
    makeChart1();
  }
  if( myChart == "chart2" ){
    chart2.destroy();
    makeChart2();
  }
  if( myChart == "chart3" ){
    chart3.destroy();
    makeChart3();
  }
  }
);

update for dynamically use: check this out (How do I call a dynamically-named method in Javascript?)

$(oCharts).each(function(i,v){
  var myChart = this.nchart;
  var makeChart = this.fchart;


    self[myChart].destroy();
    self[makeChart]()


  }
);

hope this help.

edited Apr 24, 2019 at 19:29

answered Apr 24, 2019 at 19:02

Alex Ciu

1481 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris G. Over a year ago

that's kinda what I'm going for, Alex. But I didn't want to have to create separate IF statements for each chart. That's why I'm putting their id's in the oCharts object. So I can iterate over oCharts, destroy the current chart, create a new one, and move on.

Alex Ciu Over a year ago

@ChrisG. check this update and let me know if works

Chris G. Over a year ago

oooooh! I'm gonna give that a go.

junvar · Accepted Answer · 2019-04-24 18:41:50Z

1

Two things to note:

1) The keyword you're looking for is not destroy, it's delete. And it's not a function, it's a operator used as such:

let a = {b: 3, c: 4};
delete a.b;
console.log(a);

2) Using delete is not necessary, as you'll be overwriting nchart in makeChart1.

Here's some edits to get you started:

let makeChart1 = () => {
  // do stuff
  return 1;
};

let makeChart2 = () => {
  // do stuff
  return 2;
};

let makeChart3 = () => {
  // do stuff
  return 3;
};

let oCharts = [{
  nchart: "chart1",
  fchart: makeChart1
}, {
  nchart: "chart2",
  fchart: makeChart2
}, {
  nchart: "chart3",
  fchart: makeChart3
}];

oCharts.forEach(chart =>
    chart.nchart = chart.fchart());

console.log(oCharts);

answered Apr 24, 2019 at 18:41

junvar

11.6k2 gold badges35 silver badges52 bronze badges

1 Comment

Chris G. Over a year ago

thank you for the help, junvar. But with chart.js mychartname.destroy() is the function.

Vishnu · Accepted Answer · 2019-04-24 18:37:08Z

var chart1 = {destroy:function(){console.log('chart1')}}
var chart2 = {destroy:function(){console.log('chart2')}}
var chart3 = {destroy:function(){console.log('chart3')}}
function makeChart1(){
console.log('make chart 1');
}

function makeChart2(){
 // do other stuff
  console.log('make chart 2');
}

function makeChart3(){
 // do different stuff
  console.log('make chart 3');
}

var oCharts = [{
    nchart: chart1,
    fchart: makeChart1
  },
  {
    nchart: chart2,
    fchart: makeChart2
  },
  {
    nchart: chart3,
    fchart: makeChart3
  }
]
$(oCharts).each(function(i,v){

  var myChart = this.nchart;
  var makeChart = this.fchart;

  if(typeof myChart != undefined ){
    myChart.destroy();
    makeChart();            
  }
});

Collectives™ on Stack Overflow

Passing object and function names in JavaScript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related