First element of the array is always 'undefined'

Hello coders! I’m having some problem with the code below. I am trying to get an array from a JSON file, and add it in to a certain div as a list. But the problem is every time the list is completed i see undefined in the first line, then the other elements of the array are listed. Rest of the code seems working fine. BTW I know the code is a little weird but I just started learning JS :sweat_smile:.

function searchScript(){
      var list;
      console.log("The form was submitted");
      $.getJSON('./data.json', function(data) {
            var zz = document.getElementById("searchBox").value.toLowerCase();
            var tt = data.camps[zz];
            for (i = 0; i < tt.length ;i++) {
                  list +="<p><em>" + tt[i] + "</p></em>";
            }
            console.log(data.camps[zz].length);
            document.getElementById("searchResults").innerHTML = list;
            document.getElementById("searchBox").value = "";
      });
}
				

I’ve just figured that our finally. list needs to be defined as empty first. Since the for just adds to the previous value of list, and it is undefined, it just stays there everytime. var list = ""; solved the issue.