JavaScript loop within template

Question

I am trying to make this work but I am clearly doing something wrong which I can't figure out:

function template(data){

  var contentString = 
    '<div id="content">'+
    '<div class="left">'+
    "<div class='icon'><img src='assets/image/cloudy.png' /></div>"+
    '</div>'+
    '<div class="right">'+
    '<p class="temp">'+data.currently.temperature+'</p>'+
    '<p class="summary">'+data.daily.summary+'</p>'+
    '</div>'+
    '<div class="day_wrapper">'+

    for(i = 0; i < data.daily.data.length; i++){
       '<div class="day"><p>'+data.daily.data[i].temperatureMax+'</p></div>'+
    }

    '</div>';

    return contentString;

}

Error: Uncaught SyntaxError: Unexpected token for

How can I fix this?

How would I add a 'last' class to the last paragraph in the loop?

You can't do that. You need to do contentString += inside your for loop. Remove the + just before the loop and add contentString += before your last div. — putvande
– putvande, Commented Nov 13, 2013 at 12:36
you can't use for while concatenating. End you concatenate before the for loop , continue inside it, then continue after it. I also would strongly advice the use of a templating framework like mustache.js for example... — Laurent S.
– Laurent S., Commented Nov 13, 2013 at 12:38
have you considered using templates - this stuff gets ugly fast — amdixon
– amdixon, Commented Nov 13, 2013 at 12:39
Hi all, yes I have considered using handlebars or underscore, however at the moment I am only playing around with data coming from the API. — Aessandro
– Aessandro, Commented Nov 13, 2013 at 12:40

harshboss · Accepted Answer · 2013-11-13 12:38:46Z

3

function template(data){

  var contentString = 
    '<div id="content">'+
    '<div class="left">'+
    "<div class='icon'><img src='assets/image/cloudy.png' /></div>"+
    '</div>'+
    '<div class="right">'+
    '<p class="temp">'+data.currently.temperature+'</p>'+
    '<p class="summary">'+data.daily.summary+'</p>'+
    '</div>'+
    '<div class="day_wrapper">';

if(data!=undefined && data.daily.data.length > 0)
{
        for(i = 0; i < data.daily.data.length; i++){
    contentString +=    '<div class="day"><p>'+data.daily.data[i].temperatureMax+'</p></div>';
        }
 }  


contentString += '</div>';

    return contentString;

}

answered Nov 13, 2013 at 12:38

harshboss

2762 silver badges10 bronze badges

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

8 Comments

jack Over a year ago

But please you also need to check data as undefine or not null

Aessandro Over a year ago

Sorry i am still fairly new to data coming from APIs, what is the benefit of checking if data is undefined or null? :O

harshboss Over a year ago

if there is not any data comes from api then it will come exception. so for handle that exception or strong coding side must check as data coming as undefined or not ?

harshboss Over a year ago

If data is null then its not read data.daily.data.length line

broofa Over a year ago

So, if you're going to check that data is defined, you should probably also be checking that all the structures you're referencing within data are also defined. E.g. if (data && data.daily && data.daily.data && ... :-/ As for why you do this, it's good practice to insure you're not trying to reference a property on an undefined or null object (in this case, data). The only reason you wouldn't do that is if you know for sure that data (and all it's sub-members) are going to have the expected [defined] properties.

|

Collectives™ on Stack Overflow

JavaScript loop within template

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related