jquery .map() return object inside map

Question

Heyho,

I am just building somekind of geocoder and i need to beam a json-map to the groovy backend,

trying to map this ul structure : http://jsfiddle.net/PJFVN/1/

<ul id="hiddenmap">
<li  class="hidden" id="street">Westerwarft 2</li>
<li  class="hidden" id="plz">25859</li>
<li  class="hidden" id="city">Hallig Hooge</li>
<li  class="hidden" id="country" value="" >DE</li>
<li  class="hidden" id="lon" > 8.516472</li>
<li  class="hidden" id="lat" >54.577993</li>
</ul>

to a map looking like

[{"street":"Westerwarft 2","plz":"25859","location":{"lat":"54.577993","lon":" 8.516472"},"country":"DE"}]

using following js :

var map =  $('#hiddenmap').map(function() {
var $item = $(this);
var loc =   '{"lat":"'+$item.find('li#lat').text()+'","lon":"'+$item.find('li#lon').text()+'"},';
return {  
street: $item.find('li#street').text(),
plz: $item.find('li#plz').text(),
location:loc ,
country: $item.find('li#country').text()
};
}).get();
var v = JSON.stringify(map); 
alert(v);

but as you can see in see in the fiddle, my dirty attempt throws out

[{"street":"Westerwarft 2","plz":"25859","location":"{\"lat\":\"54.577993\",\"lon\":\" 8.516472\"},","country":"DE"}]

so i need a native way to get the location object inside the map, and perspectivly i will need to join more adresses to the map

is there a way to do so ?

because currently i am hardcore repeating myself, building up the maps manually for every different case looking terrible like :

       var String = '['+'{'+'"fax":'+'"'+fax1+'"'+','+'"genau":'+genau1+','+'"land":'+'"'+land1+'"'+','+'"location": {'+'"lon":'+lon1+','+'"lat":'+lat1+'},'+'"notruf":'+'"'+notruf1+'"'+','+'"ort":'+'"'+ort1+'"'+','+'"plz":'+'"'+plz1+'"'+','+'"strasse":'+'"'+strasse1+'"'+','+'"telefon":'+'"'+telefon1+'"},{'+'"fax":'+'"'+fax2+'"'+','+'"genau":'+genau2+','+'"land":'+'"'+land2+'"'+','+'"location": {'+'"lon":'+lon2+','+'"lat":'+lat2+'},'+'"notruf":'+'"'+notruf2+'"'+','+'"ort":'+'"'+ort2+'"'+','+'"plz":'+'"'+plz2+'"'+','+'"strasse":'+'"'+strasse2+'"'+','+'"telefon":'+'"'+telefon2+'"}]';

i need to get rid of this

thanks in advance for any hint

Answer 1

Perhaps I'm not understanding your question correctly, but I'm not sure you're manually building a string for the location. Why don't you just make it a native object and let JSON.stringify() handle the conversion.

Like this:

var map = $('#hiddenmap').map(function () {
    var $item = $(this);
    var loc = {
        lat: $item.find('li#lat').text(),
        lon: $item.find('li#lon').text()
    };
    return {
        street: $item.find('li#street').text(),
        plz: $item.find('li#plz').text(),
        location: loc,
        country: $item.find('li#country').text()
    };
}).get();
var v = JSON.stringify(map);
console.log(v);
alert(v);