Get values for jVectormap. getElementbyID is not working

Question

I try to set markers in a jVectormap. I get the content from my database and write it in a hidden input field. Return in the following format:

{latLng:[52.5200066,13.404954],name:'Berlin'},{latLng:[53.0792962,8.8016937],name:'Bremen'},{latLng:[49.8728253,8.6511929],name:'Darmstadt'},{latLng:[50.1109221,8.6821267],name:'Frankfurt'},{latLng:[53.5510846,9.9936818],name:'Hamburg'},{latLng:[54.3232927,10.1227652],name:'Kiel'},{latLng:[50.937531,6.9602786],name:'Köln'},{latLng:[48.30694,14.28583],name:'Linz'},{latLng:[48.1351253,11.5819806],name:'München'},{latLng:[53.6355022,11.4012499],name:'Schwerin'},{latLng:[48.7758459,9.1829321],name:'Stuttgart'},{latLng:[48.0689177,11.6212533],name:'Unterhaching'},,{latLng:[48.2081743,16.3738189],name:'Wien'},

If i want to read this field nothing happens. If I copy and paste this line to the javascript section everything is fine.

This is working:

<script>
    $(function(){
        var map,
          markers = [
            {latLng:[52.5200066,13.404954],name:'Berlin'},{latLng:[53.0792962,8.8016937],name:'Bremen'},{latLng:[49.8728253,8.6511929],name:'Darmstadt'},{latLng:[50.1109221,8.6821267],name:'Frankfurt'},{latLng:[53.5510846,9.9936818],name:'Hamburg'},{latLng:[54.3232927,10.1227652],name:'Kiel'},{latLng:[50.937531,6.9602786],name:'Köln'},{latLng:[48.30694,14.28583],name:'Linz'},{latLng:[48.1351253,11.5819806],name:'München'},{latLng:[53.6355022,11.4012499],name:'Schwerin'},{latLng:[48.7758459,9.1829321],name:'Stuttgart'},{latLng:[48.0689177,11.6212533],name:'Unterhaching'},,{latLng:[48.2081743,16.3738189],name:'Wien'},

          ],

This is not working:

$(function(){
        var map,
          markers = [
            document.getElementById("geodata").value; 

          ],

Where´s my problem? :(

Answer 1

So I changed everything a different times and now it´s almost working.

I have now "divs" instead of an input. I changed my php function and return the correct JSON-Formt (This was my mistake in the first try)

Here is the javascript code:

function GET_PLACES(){
    var result_numbers = document.getElementById("result_numbers").value -1;
    var text = "";
    var result = "";
    for (i = 1; i < result_numbers + 2; i++) {
        text = JSON.parse(document.getElementById("geodata"+i).innerHTML);
    }
    return text;
}
console.log(GET_PLACES());
alert(JSON.stringify(GET_PLACES()));
$(function(){
        var map,

          markers = [GET_PLACES()],

...

The last problem i have, is that it only returs the last found JSON from the loop.

How can an build an array that contains all found JSON objects?

UPDATE ... Here is the solution

function GET_PLACES(){
    var result_numbers = document.getElementById("result_numbers").value -1;
    var text = "";
    var result = [];
    for (i = 1; i < result_numbers + 2; i++) {
        text = JSON.parse(document.getElementById("geodata"+i).innerHTML);
        result.push(text);
    }
    return result;
}
console.log(GET_PLACES());
alert(JSON.stringify(GET_PLACES()));
$(function(){
        var map,

          markers = GET_PLACES(),