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
– apsillers, Commented Oct 2, 2014 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
– Barmar, Commented Oct 2, 2014 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
– Bridgbro, Commented Oct 2, 2014 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 — Bergi
– Bergi, Commented Oct 2, 2014 at 15:38

Flynn · Accepted Answer · 2014-10-02 17:38:25Z

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 2, 2014 at 17:38

answered Oct 2, 2014 at 15:16

Flynn

6,2418 gold badges40 silver badges55 bronze badges

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

5 Comments

Bridgbro Over a year ago

Thanks! I think this is more what I'm looking for. I'll try this out and post an update in a bit.

Bergi Over a year ago

Please instantly remove eval from this code or I'm going to downvote you… :-P

Bergi Over a year ago

Oh I see this was based on a previous version of the question, sorry. It's still horrible :-)

Bridgbro Over a year ago

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.

Flynn Over a year ago

After you get the lat and long, and make your district, just use polyLayer.push(district)

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related