JQuery data selector returning value + undefined

Question

I have a piece of jquery which drags the value from a page. One of the elements is a data attribute that is dynamically created dependent on form input. It returns the value but sticks 'undefined' infront of it on the first loop.

Relevent Code is as follows...

var get_files_split=get_files.split("*^*");
        var files_count=get_files_split.length-1;
        if(files_count!=0)
        {
            $('.uploaded_files').html("");
            var app_files="";
            for(var y=0;y<files_count;y++)
            {
                var files_split=get_files_split[y].split("|");
                app_files+="<div class='upfile_holder'>";
                app_files+="<div class='f_h'><span class='fil1'  data-this_file='"+files_split[0]+"'>"+files_split[1]+"</span> (<span class='fil5'>"+files_split[6]+"</span>)</div>";
                app_files+="<div class='f_h fil2'>"+files_split[2]+"</div>";
                if(files_split[4]!="")
                {
                app_files+="<div class='f_h'>&pound;<span class='fil3'>"+files_split[4]+"</span> <span class='fil4'>"+files_split[5]+"</span></div>";
                }
                if(files_split[3]!="")
                {
                    app_files+="<div class='f_notes'>";
                    app_files+="<p class='fil6'>"+files_split[3]+"</p>";
                    app_files+="</div>";
                }
                app_files+="</div>";


            }
            $(app_files).appendTo('.uploaded_files');
        }

This places the data on the page

JQuery that reselects the data is as follows...

var files_inform;
if($('.upfile_holder').length)
{
    $('.upfile_holder').each(function(){
            var file_ids=$('.fil1', this).data('this_file');
            var file_name=$('.fil1', this).text();
            var file_type=$('.fil5', this).text();
            var file_priority=$('.fil2', this).text();
            var file_price=$('.fil3', this).text();
            var file_tender=$('.fil4', this).text();
            var file_notes=$('.fil6', this).text();
            files_inform+=file_ids+"|"+file_name+"|"+file_type+"|"+file_priority+"|"+file_price+"|"+file_tender+"|"+file_notes+"*^*";
            alert(files_inform);
        });
}

The reason for reselecting the data is that the appended part is contained within a different function to when it is extracted.

Can't figure out why it is coming up as indefined.

Answer 1

The files_inform variable is equal to undefined when the loop starts, and then you start appending string values to it. undefined + "SomeString" is "undefinedSomeString". Initialise files_inform to an empty string:

var files_inform = '';

Answer 2

I have found the problem:-

var files_inform;

Should be -

var files_inform="";

Just by declaring the variable seems to mean this first state is undefined whereas declaring it as an empty means that it contains nothing.