Javascript using list items within objects and variables

Question

*Using code from Genia S. I have appended my 'workaround' to the bottom of the post *

My head is spinning from 3 hours of browsing forums and trying snippets of code. My main problem is that I am not a programmer, I hack together code until I get it to work. Any explanation or direction will be appreciated. Variables, objects, arrays all seem to be the same in some ways, I don't understand the intricacies.

I want to take away the repetitiveness of this code (using leafletjs for constructor). Copy/pasting the same code 20-30 times does not seem elegant:

var manholes = new L.TileLayer.WMS("http://wms.server.address", {
  layers: 'manholes',
  format: 'image/png8',
  transparent: true
});

var stormdrains = new L.TileLayer.WMS("http://wms.server.address", {
  layers: 'stormdrains',
  format: 'image/png8',
  transparent: true
});

continued for each layer I need to create

That seems like a lot of redundant code when I change only one word (manholes, stormdrains, etc....) in only two places. So, I am trying to streamline this process into something like:

  var layerlist = ["manholes","stormdrains","gravitylines","pumpstations"];

  for (i = 0; i < layerlist.length; i++) {

    var layerlist[i] = new L.TileLayer.WMS("http://wms.server.address", {
      layers: layerlist[i],
      format: 'image/png8',
      transparent: true
    });

  };

Please, do not assume that I know why I am using _____ instead of ____; or why I am doing _____ when I should be doing ________. I began this post by admitting my lack of understanding.

Below is the code I am using. Instead of pushing to a new array as Genia suggested, I am using window[] to create new objects (I have no idea how this works). My problem using Genia's solution was that further in the code, leafletjs was throwing exceptions trying to access the objects within the new array using . notation. If this can be remedied, I am glad to learn. Thank you all for the help, and thanks to Genia for the comments and replies. All bad practices and butchered code are my own doing, and nothing negative should be attributed to Genia.

var layerlist = ["manholes","stormdrains","gravitylines","pumpstations"];

for (var i = 0; i < layerlist.length; i++) {
  var name = String(layerlist[i])
  window[name] = new L.TileLayer.WMS(ramnode, {
    layers: name,
    format: 'image/png8',
    transparent: true
  });
};

now I have four new, individual objects named manholes, stormdrains, gravitylines, pumpstations that act exactly the same as if I had created them the original way (first code example at the top)

The first step in understanding is admitting ignorance. Well done, and keep it up. — Christian Ternus
– Christian Ternus, Commented Oct 16, 2013 at 20:27
That said, what is your actual question? What are you actually asking? Does the second code snippet not work? — Christian Ternus
– Christian Ternus, Commented Oct 16, 2013 at 20:29
I'm not sure what the question is. You have found a solution, so are you simply canvassing for better ones, or just commentary on the one you've already found? — kinakuta
– kinakuta, Commented Oct 16, 2013 at 20:29
My example gives me this error: SyntaxError: missing ; before statement , pointing to this line: var layerlist[i] = new L.TileLayer.WMS("wms.server.address", { — Barrett
– Barrett, Commented Oct 16, 2013 at 20:35

Yevgeny Simkin · Accepted Answer · 2013-10-16 20:33:17Z

2

for (x = 0; i < layerlist.length; i++) {

var layerlist[i] = new L.TileLayer.WMS("http://wms.server.address", {
  layers: layerlist[i],
  format: 'image/png8',
  transparent: true
});

};

Notice how you're declaring x but then using i in your loop? (this is a loop, btw).

Presumably if you convert x= 0 to var i = 0 (it's safer to declare var here just in case there is another i in global scope somewhere in your code that you would step on by accident) you should get what you need (assuming the rest of your code points to something called L which is not displayed here).

Oh, and also var layerList[i] is wrong.

first you want to declare a layerList array OUTSIDE the loop like this:

var layerList = new Array();

then you can add to it via

layerList[i]; // notice NO var here

So the result would be

 var layerList = new Array();
    for (var i = 0; i < layerlist.length; i++) {

    layerList[i] = new L.TileLayer.WMS("http://wms.server.address", {
  layers: layerlist[i],
  format: 'image/png8',
  transparent: true
});
};

answered Oct 16, 2013 at 20:33

Yevgeny Simkin

28.6k41 gold badges145 silver badges243 bronze badges

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

4 Comments

Barrett Over a year ago

This create the layerList array and populates it with object. I had to add String() at layers: String(layerlist[i]), .... However, leafletjs cannot 'locate' the objects after they have been inserted into the new array. Again, I do not assume anything. Can I name the objects in the array so that the code can find them by name? Or should I be creating individual objects for each layer instead of one array of multiple objects? Or do I have to figure a way for leaflet to search by the array index?

Yevgeny Simkin Over a year ago

Unfortunately I really can't answer your question without more info as I have no idea what you're doing. However, in Javascript, your array *can be indexed by strings rather than numbers, so if you wanted to populate them as layerList["joe"] = new L....etc. you can do that (if that helps).

Barrett Over a year ago

Thanks for the advice. That solution worked. However, it was not quite the same answer as I was originally looking for. Although I can access the new objects, I have to use . notation from now on. Is there a way to explicitly make individual objects named after each list item? Should I begin a new question with my updated scenario?

Barrett Over a year ago

I have found a way that answers my original question, using what you told me. However, instead of creating a new array and pushing to it, I use window[i] to create the objects. People all over are decrying creating globabl variables, but I do not know enough to make the .notation work without throwing errors down the line. I will update my answer with my working code.

John · Accepted Answer · 2013-10-16 20:29:25Z

0

The main thing I notice is in your for constructor for(__) you start with x=0 but then switch to using i for your iterator variable. Try switching x with i in your constructor and see if that gets you what you need; cause other than that it seems pretty much like it should work.

answered Oct 16, 2013 at 20:29

John

4903 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript using list items within objects and variables

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related