JavaScript string formatting

Question

JavaScript string formatting

I am defining a variable and I would like to use it to write HTML content code. However, I am new to JavaScript and I am definitely doing something wrong.

What I am trying to write is the content of the anchor infoWindow to the Google Maps mark. I am using JSON content to write my content into a function called description.

Thank you for your help.

    <script>
         var json = [
{
"lat":51.5202,
"lng":-0.073101,
"title":"nice single room*--only 135pw- close to BRICK LANE | United Kingdom | Gumtree",
"roTy":"Single room",
"prTy":"House",
"price":"585"
"area":"Brick Lane",
"sta":"Aldgate East",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
{
"lat":51.5202,
"lng":-0.073101,
"title":"Come and enjoy the Vibrant East London, Many rooms available from 130pw | United Kingdom | Gumtree",
"roTy":"Double room",
"prTy":"House",
"price":"563"
"area":"Brick Lane",
"sta":"Aldgate East",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
{
"lat":51.5217,
"lng":-0.072289,
"title":"MANY ROOMS AVAILABLE *from 130PW all included | United Kingdom | Gumtree",
"roTy":"Double room",
"prTy":"House",
"price":"563"
"area":"Brick Lane",
"sta":"Shoreditch High Street",
"laTy":"Private landlord",
"website":"www.gumtree.com",
},
] 

var myCenter=new google.maps.LatLng(51.5183,-0.068066);

function initialize()
{
    var mapProp = {
        center:myCenter,
        zoom:12,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById       ("googleMap"),mapProp);

var infowindow =  new google.maps.InfoWindow({
    content: ""
});

for (var i = 0, length = json.length; i < length; i++) {
    var data=json[i];
    var latLng = new google.maps.LatLng(data.lat, data.lng); 
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
    });
    var descr = description(data);
    bindInfoWindow(marker, map, infowindow, descr);
    } 
}

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading" class="firstHeading">'%s'</h1>';
        entete += '<div id="bodyContent">';
        entete += '<p>roTy in prTy | laTy | £pr per calendar month</p>';
        entete += '<p>ar | Closest train station : sta</p>';
        entete += '<p>descr</p>';
        entete += '<p><a href="link">Access the original ad</a></p>';
        entete += '</div></div>';

        entete.replace('%s',data.website);
        entete.replace('roTy',data.roTy);
        entete.replace('prTy',data.roTy);
        entete.replace('laTy',data.laTy);
        entete.replace('pr',data.price);       
        entete.replace('ar',data.area);
        entete.replace('sta',data.sta);        
        entete.replace('descr',data.title);        
        entete.replace('link',data.link);

    return entete;
}
function bindInfoWindow(marker, map, infowindow, descri) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(descri);
        infowindow.open(map, marker);
     });
}

google.maps.event.addDomListener(window, 'load', initialize);


    </script>

+3

javascript string html

Dirty_Fox 28 june 15 at 11:37

source to share

2 answers

I don't think using so many substitutions is a good idea. Why not use something like the following?

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading">' + data.website + '</h1>';
    ...

    return entete; 
}

+2

PMerlet 28 june 15 at 15:15

source to share

Viraj Nalawade · Accepted Answer · 2015-06-28T11:48:29+0000

Hi I think the problem is with the function description

. It should return a value for descr assignment, var descr = description(data)

or you can store it entete

as a global variable , i.e. define it outside of a function, which I don't know is doable for you. So you just try: -

function description(data)
{
    var entete = '<div id="content">';
        entete += '<h1 id="firstHeading" class="firstHeading">%s</h1>';
        entete.replace('%s',data.website);
...//similar statements here
...
...
return entete; 
}

Update

I usually use functions like this when I want to create many elements

function addElements(tag,attribute,attributeValue,text)
{
    var element;
    element = document.createElement(tag);

    if(attribute != undefined && attribute != null &&  attributeValue != undefined &&  attributeValue != null)
    {
        for(itr=0;itr<attribute.length;itr++)
        {
            element.setAttribute(attribute[itr], attributeValue[itr])
        }
    }   
    if(text != undefined && text != null && text.length != 0)
    {
        element.textContent=text;
    }   
    return element
}

It can be used like

var entete =  addElements('div',['id'],['content'],null).
append(addElements('h1',['id','class'],'firstHeading','firstHeading'],null).
...//for other elements
)

But I don't know if you really need to. If you want these benefits you should use the above method.

But if you just don't do it like

function description(data)
{
var entete = '<div id="content">';
entete += '<h1 id="firstHeading" class="firstHeading">'+data.website+'</h1>';
entete += '<div id="bodyContent">';
entete += '<p>'+data.roTy+' in '+data.roTy+' | '+data.laTy+' | £'+data.price+' per calendar month</p>';
entete += '<p>'+data.area+' | Closest train station : '+data.sta+'</p>';
entete += '<p>'+data.title+'</p>';
entete += '<p><a href="'+data.link+'">Access the original ad</a></p>';
entete += '</div></div>';
return entete;
}

And everything should be fine. By the way, thanks for this question read about infowindows .

JavaScript string formatting

More articles: