How to add defined objects to an array based on object names in another array

Question

I wonder if anyone can help with this JavaScript problem that I can't find a solution to.

I have a number of pre-defined objects as shown below. The details are unimportant to this example apart from the names of the objects.

const dialText = {
    id: 'dialText',
    afterDatasetsDraw(chart, args, options){
        ...
    }
}
const gaugeNeedle = {
    id: 'gaugeNeedle',
    afterDatasetsDraw(chart, args, options){
    ... etc.
   }
}
const gaugeOutline = {
   id: 'gaugeOutline',
   afterDatasetsDraw(chart, args, options){
   ... etc.
   }
}
etc....

In a separate code segment I have an array that includes a list of some object names (corresponding to these pre-defined objects)

var myList = ['dialText', 'gaugeNeedle'];

and a separate object called chartData which looks something like this:

var chartData = {type:"dot", x:20, y: 30, color:"white"};

I now want to include the objects named in myList into the chartData object as an attribute called 'plugins'.

I hoped to achieve this by the following code:

for (var myValue in myList ) {
   if (typeof chartData.plugins !== 'undefined'){
       chartData.plugins.push(myValue);
   } else {
      chartData.plugins = [myValue];
   }
}

However, this approach does not work because the names are going into chartData object rather than the objects themselves. Is there some way to add the objects referenced by name (in myList) to the chartData object as objects.

The final chartData array should end up looking something like this:

chartData = {
  type:"dot", 
  x:20, 
  y: 30, 
  color:"white",
  plugins: {
      [id: 'dialText',
        afterDatasetsDraw(chart, args, options){
        ...
      }],
      [id: 'gaugeNeedle',
        afterDatasetsDraw(chart, args, options){
        ...
      }]
  }
}

Any suggestions will be much appreciated.