How to loop, concatenate and push content into an array in JavaScript

Question

I'm trying to dynamically generate an array and concatenate the results without turning the google maps function into strings.

Any suggestions on the best way to do this would be great.

Here is a snippet of my code:

function goCheck() { // find out what checkboxes in the form were selected

//set a few variables and arrays
var input = document.getElementsByTagName('input');
var checkboxCount = 0;
var selections = [];
var urlArray = [];

// 1st loop to get form checkbox selections
for (var i=0, length = input.length; i<length; i++) { 
     if (input[i].checked === true) {
     s = input[i].value;
     selections.push(s); // store values for checkbox selections in array
     checkboxCount++; // keep track how many were checked

     var url = "https://mywebsite.ca/" + s + ".txt";
     urlArray.push(url); // store urls in array
   }
}

console.log(checkboxCount); // number of boxes checked
console.log(selections); // array with the selections
console.log(urlArray); // an array with the json urls

// 2nd Loop  - iterate over URL array and call function to get json object

var xmlhttp;
var myArr;
for (var i=0, length = urlArray.length; i<length; i++) {
    xmlhttp = new XMLHttpRequest(); //
    console.log(xmlhttp);
    xmlhttp.onreadystatechange = function() { 
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              var myArr = JSON.parse(xmlhttp.response);

              console.log(myArr);
              console.log(myArr[selections[i]]);
              console.log(myArr[selections[i]].length); 


/* this is where I'm getting into trouble ----->


              var arraySize = (myArr[selections[i]].length); 
              for(k=0; k<arraySize; k++) {  
              district = "new google.maps.LatLng("+myArr[selections[i]][0]+")"; 
              polyLayer.push(district);


 <----- */  

         }
       } 
    };

    xmlhttp.open("GET", urlArray[i], false);
    xmlhttp.send();  
}}

I assume the `ployLayer = [...]` is there to show an example of what it looks like? It doesn't make sense to `push` into the array and then immediately overwrite it. — apsillers, Oct 02 '14 at 14:56
You say you don't want to turn them into strings, but that's exactly what you're doing. What do you really want to do? — Barmar, Oct 02 '14 at 14:59
I've updated my code. Ya that first snippet didn't make a lot of sense. Sorry guys! lol. Basically, I'm trying to get and parse json files and put that data into the polyLayer array. I'm not sure how best approach this kind of problem. There probably is a more efficient way to do this. — Bridgbro, Oct 02 '14 at 15:31
Not sure whether you handled the asynchronous nature of ajax correctly, but you definitely have a [problem with creating those callbacks in a loop](http://stackoverflow.com/q/750486/1048572) — Bergi, Oct 02 '14 at 15:38

Flynn · Accepted Answer · 2014-10-02T17:38:25.230

2

I'm a little confused as to what you want to do, but from the best I can infer, I could recommend a couple of things. First, you could loop through your array polyLayer replace the strings with their evaluated objects:

polyLayer.forEach(function (element, index, array) {
    array[index] = eval(element);
});

Don't do that. You expose your code to a lot of dangers with potential for that eval to run malicious or unexpected code, by literally just adding a string to polyLayer.

Otherwise, to avoid the issue of them being strings in the first place, set district equal to the evaluated object. Modify myArr[selections[i]][0] to be the two numbers you need:

var n = myArr[selections[i]][0].split(",");
district = new google.maps.LatLng( parseFloat(n[0]), parseFloat(n[1]) );

EDIT:

Thank you for adding more of your code, and rewording your question. I still think that splitting and parsing myArr[selections[i][0]] for floats to use to create your district variable (as shown above) is what you are looking to do.

edited Oct 02 '14 at 17:38

answered Oct 02 '14 at 15:16

Flynn

5,903
7
38
55

Thanks! I think this is more what I'm looking for. I'll try this out and post an update in a bit. – Bridgbro Oct 02 '14 at 15:34
Please instantly remove `eval` from this code or I'm going to downvote you… :-P – Bergi Oct 02 '14 at 15:37
Oh I see this was based on a previous version of the question, sorry. It's still horrible :-) – Bergi Oct 02 '14 at 15:49
Ok, I'm using parseFloat and the loop is returning the all lat and lng numbers - so that works. I'm just trying to push each instance of `district` into the `polyLayer` array... I'm still working on it, but getting close. – Bridgbro Oct 02 '14 at 18:39
After you get the lat and long, and make your `district`, just use `polyLayer.push(district)` – Flynn Oct 02 '14 at 19:06

How to loop, concatenate and push content into an array in JavaScript

1 Answers1