Turn String array values into array object

Question

I am passing a string into a hidden field on the page and then splitting it in order to try to get an array of items I can iterate over and add multiple markers onto a google map. If I hard code the array it works fine, but if I try to split the string and use the same code it does not work. I'm assuming because splitting the string creates a string array instead of Array objects. When I split the string the array ends up with "['Smith Company', 33.61678, -111.90017]" with the double quotes around it. How would I convert these items so that I can use it the same as the hard coded values?

I add the square brackets, single quotes and vert bar in a StringBuilder in the code behind. Using C# for that if it will make a difference. I am not married to doing it this way, but still green with JavaScript so this was my initial solution. My initial string looks like this"

"['Jones Company', 26.16683, -98.23342]|['Smith Company', 33.61678, -111.90017]|['Bob Company', 29.70008, -98.03347]|['Blue Company', 37.71675, -122.21672]|['Red Company', 42.46692, -114.48342]"

Thanks.

function initialize() {
        var myOptions = {
            zoom: 4,
            center: new google.maps.LatLng(26.16683, -98.23342),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //What I try to use when the hard coded is commented out
        var myString = document.getElementById('hdnString').value;
        var myItems = new Array();
        myItems = myString.split("|");

        //Hard coded items that I comment out when trying the above
        var myItems = [
            ['Jones Company', 26.16683, -98.23342],
            ['Smith Company', 33.61678, -111.90017],
            ['Bob Company', 37.71675, -122.21672],
            ['Blue Company', 42.46692, -114.48342],
            ['Red Company', 36.58339, -121.8335]
        ];

            // Add markers to the map
            for (var i in myItems){
                var myLatLng = new google.maps.LatLng(myItems[i][1], myItems[i][2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: myItems[i][0]
                });
            }
        }

Answer 1

In your case it doesn't work with splitting, because split produce you simple array, whereas in you hard coded case you use the array of arrays, which is slight different. All you have do to is to define another delimiter for each record and first split by it and only then split by "|".

I mean:

var string = "first record|valueA|valueB;second record|valueA|valueB";
var firststep = string.split(";");
for ( var tmp in firststep)
{
    secondstep = tmp.split("|");
    //secondstep[0] = first record; secondstep[1] = valueA and etc...
}

Answer 2

You can just do

var myItems = myString.split("|");

instead of

var myItems = new Array();
myItems = myString.split("|");

as the split function will return an array of strings. If you could post what hdnString's value is, I may be able to help further, but looking at your code, you want an array of arrays.

EDIT:

Assuming

hdnString = "'Jones Company', 26.16683, -98.23342|
            'Smith Company', 33.61678, -111.90017|
            'Bob Company', 37.71675, -122.21672|
            'Blue Company', 42.46692, -114.48342|
            'Red Company', 36.58339, -121.8335|";

something like the following will get you an array of arrays

var myItems = hdnString.split("|");
for( var i = 0; i< myItems.length; i++)
    myItems[i] = myItems[i].split(",");

Answer 3

You're going to have to use eval() to convert the string representations of arrays to actual javascript arrays.

This code ought to work:

var myString = document.getElementById('hdnString').value;
var myItems = [];
var rawItems = myString.split("|");

for (var i=0; i<rawItems.length; i++){
    myItems.push(eval(rawItems[i]));
}

Do note that eval is evil except when it's not.

Answer 4

You may want to try using JSON formatted text in your hidden field. Then you can parse the JSON into real JavaScript Objects. If I understand your hidden field correctly you would just need a string that looks like

<input id="myItemList"  type="hidden" value="{'myItems' = [
            ['Jones Company', 26.16683, -98.23342],
            ['Smith Company', 33.61678, -111.90017],
            ['Bob Company', 37.71675, -122.21672],
            ['Blue Company', 42.46692, -114.48342],
            ['Red Company', 36.58339, -121.8335]
        ]}"/>

Then in javascript:

// this is an array
var myItems = JSON.parse(document.getElementById("myItemList").value)["myItems"];