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();  
}}

Answer 1

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.