Determine if element is a select, if so fill it with data from another object The following snippet is an object that handles each of my app's data management views. When a view is created in App.partialView(), I have hard-coded each element that is used to edit that view's data. Some of those elements are select lists that contain data from another view within the same App.dataManager(), never from another manager.

My issue is with the process in which I fill those select lists. I am already looping through each view within the manager, but I need to get the data from the select list's parent data source (another view) so I ultimately have to loop through the views within the existing loop.

Does this appear to be the only way to handle my issue, am I missing something that's right in front of me, or am I out of left field picking daisies?

EDIT: I'm not one to be offended by criticism and I am open to suggestions for improvement in my overall use of JavaScript. I am self taught, so any advice is welcome.

var App = {};
App.dataManager = function() {
  var a = arguments[0];
  var _this = this;
  this.name = a.name;
  this.views = a.views;
  this.tab = a.tab;

  this.views.forEach(function(view) {
    view.dataManager = _this;
  });

  this.tab.on("shown.bs.tab", function() {
    _this.getData();
  });

  this.getData = function() {
    this.views.forEach(function(view) {
      api
        .get(view.dataUri)
        .then(function(data) {
          view.data = data;
        })
        .then(function() {
          fillTable(view);
        })
        .then(function() {

          //***This is the block in question***

          _this.views.forEach(function(v) {
            v.elements.forEach(function(e) {
              if (e.node.tagName === "SELECT" &amp;&amp; e.dataParent) {
                var dP = _this.views.find(function(d) {
                  return d.name === e.dataParent;
                });
                if (dP &amp;&amp; dP.data) {
                  var dPData = dP.data.filter(function(d) {
                    return d.Enabled;
                  });
                  v.loadDropdownList(e.node, dPData);
                }
              }
            });
          });
        })
        .then(function() {
          if (!view.listeners) {
            view.addButton.addEventListener("click", function() {
              addButtonHandler(view);
            });
            view.updateButton.addEventListener("click", function() {});
            view.listeners = true;
          }
        });
    });
  };

  function addButtonHandler(view) {
    //sanitized for review
  }

  function fillTable(view) {
    //sanitized for review
  }

  function toggleHideButtons(row) {
    //sanitized for review
  }

  function toggleShowButtons(row) {
    //sanitized for review
  }

  function toggleEntity(row, view) {
    //sanitized for review
  }
};
I tried to decipher your code, and express it in pseudo-code:

for each view:
    request view data from server
    for each view:
        for each &lt;select&gt; element with dataParent in view:
            find view where view.name == dataParent
            if found and has data:
                load &lt;select&gt; with data from that view


So you load data for each view, but then you also go through all other views to pass this data to them when they happen to need it. However you don't only pass the data from currently loaded view, but you try to cover all the views (some of which have not been loaded yet).

So the first optimization to make is to eliminate this third loop through all the views. Just passing the data from currently loaded view to the views that need it:

for each view (loadedView):
    request view data from server
    for each view:
        for each &lt;select&gt; element where dataParent == loadedView.name:
            load &lt;select&gt; with data from that loadedView


That's better, but we still need to loop through all the views to find out which ones need our data. Perhaps there are hundreds of views and only three need the data.

A better approach would be to use a publish-subscribe model. Instead of having to loop through all the views, each view that needs data would subscribe itself on the view who's data it needs. When the data for that view is loaded, it would publish this data to all its subscribers

For example:

viewA = new View();
viewB = new View();
viewC = new View();
viewA.addListener(viewB);
viewA.addListener(viewC);
// load view A, which will also push data to views B &amp; C
viewA.loadData();


Each view would have an array of its subscribers. .addListener() method would add a new item to this array. And in loadData(), after the data has been fetched from server, we'd loop through this subscribers array and call a method like addData() on each view.