I don't understand why my script generates an empty <li> tag at the beginning of the HTML list ?

var students = [
{
    name: 'John',
    track: 'javascript basics',
    achievements: 5,
    points: 200

},
{
    name: 'Vlad',
    track: 'python',
    achievements: 10,
    points: 3000

},
{
    name: 'Leigh',
    track: 'databases',
    achievements: 4,
    points: 444

},
{
    name: 'Sushi',
    track: 'css',
    achievements: 2,
    points: 100

},
{
    name: 'Gizmo',
    track: 'php',
    achievements: 9,
    points: 2000

}
];
var result;

function print(message) {
    var div = document.getElementById('output');
    div.innerHTML = message;
}

result = "<ol>";

function loopArray (array) {
    result += "<li>";
    for  (var i = 0; i<array.length; i += 1 ) {

        result += "<li>"; 

        for (var key in array[i]) {
            result += key + " : " + array[i][key] + "</br>";
        }

        result += "</li>"
    }

    result += "</ol>"
    print(result)
}

loopArray(students);