unexplained undefined string displayed on my website. not sure how to get rid of it

Question

I have a undefined string being displayed on my page and i have no idea why it is their besides the function that is probably causing it, i only know this from displaying allot of console errors to locate the problem. I believe that Mustache is doing this somehow when i call on templates. " undefined "

The question is how do i get rid of this undefined string being injected in my page. Any help would be much appreciated.

Code:Function that is being called that is somehow or reason displaying a undefined string in my div

 getProjects: function(){
            portfolio.topOfPage();
            var request1 = $.ajax({
                url: "js/projects.js",
                dataType:'json',
                cache: true,
            }).then(function(response){
                var data = response.projects;
                var template = $('#projects_tmp').html();
                var projects;
                $.each(data, function(key,val){
                    console.log("Key: "+key+", Value: "+val);
                     projects += Mustache.to_html(template, val);
                });
                return projects;
            });

My mustache template:

<script id="projects_tmp" type="text/template">
        <div class='small-6 medium-3 large-2 columns left thumb {{{genre}}}' data-id='{{{id}}}'>
            <div class='project'><figure><img src='{{{largePic}}}' alt='' />
            <figcaption class='caption'><span>{{genre}}</span></figcaption class='caption'></figure></div>
           </div>
        </div>
    </script>

Answer 1

Problem is your projects variable should have a default value of '', in your getProjects method when you are doing projects += it is adding undefined value which comes by default.