Объект undefined/HTMLElement, выводящийся с использованием jQuery каждый

Question

Я использую jQuery каждый/getJSON для прокрутки моего файла data.json, захвата и форматирования данных и вывода его на мою страницу внутри div #output.

Он работает как ожидалось, за исключением [object HTMLElement], который странно добавлен к визуализированному HTML.

$.getJSON('json/data.json', function (data) { 
    var output; 
    $.each(data, function (index, entry) { 
     output += '<div class="entry" id="' + entry.date + '">'; 
     $.each(entry.exercises, function (index, exercise) { 
      var i = 1; 
      output += '<table class="exercise"><tr><th>' + exercise.name 
        + '</th><th>Weight</th><th>Reps</th></tr>'; 
      $.each(exercise.stats, function (index, stat) { 
       output += '<tr><td>SET ' + i++ + '</td><td><input type="number" placeholder="' 
        + stat.weight + '"></td><td><input type="number" placeholder="' 
        + stat.reps + '"></td></tr>'; 
      }); 
      output += '</table>'; 
     }); 
     output += '</div>'; 
    }); // each 
    $('#output').html(output); 
}); // getJSON 

data.json

[ 
    { 
     "date" : 12252014, 
     "exercises" : [ 
      { 
       "name" : "Squats", 
       "stats" : [ 
        { "weight" : 135, "reps" : 5 }, 
        { "weight" : 225, "reps" : 10 }, 
        { "weight" : 315, "reps" : 15 } 
       ] 
      }, 
      { 
       "name" : "Bench", 
       "stats" : [ 
        { "weight" : 435, "reps" : 20 }, 
        { "weight" : 525, "reps" : 15 }, 
        { "weight" : 615, "reps" : 30 } 
       ] 
      }, 
      { 
       "name" : "Rows", 
       "stats" : [ 
        { "weight" : 735, "reps" : 35 }, 
        { "weight" : 825, "reps" : 40 }, 
        { "weight" : 915, "reps" : 45 } 
       ] 
      } 
     ] 

    } 
] 

HTML ошибка:

<div id="output"> 
    "[object HTMLElement]" 
    <div class="entry" id="12252014" style="display: none;"> 
     <table class="exercise"> 
      <tbody> 
       <tr> 
        <th>Squats</th> 
        <th>Weight</th> 
        <th>Reps</th> 
       </tr> 
       <tr> 
        <td>SET 1</td> 
        <td><input type="number" placeholder="135"></td> 
        <td><input type="number" placeholder="5"></td> 
       </tr> 
       <tr> 
        <td>SET 2</td> 
        <td><input type="number" placeholder="225"></td> 
        <td><input type="number" placeholder="10"></td> 
       </tr> 
       <tr> 
        <td>SET 3</td> 
        <td><input type="number" placeholder="315"></td> 
        <td><input type="number" placeholder="15"></td> 
       </tr> 
      </tbody> 
     </table> 
     [...] 
    </div> 
</div> 

Почему это [object HTMLElement] добавляется к выходу?

Answer 1

Это для меня выглядит как переменная output allready была в использовании до и заполнена элементом html.
В вашем случае это ваша обертка div с идентификатором output, который отображается как глобальная переменная.

Вы должны быть в состоянии преодолеть это, давая выход ан начального значения:

var output = ''; 

Поскольку использование var не Cleanup существующую переменную:

var output = 'Lorem ipsum'; 
 
var output; 
 

 
alert(output)

Answer 2

Изменить

var output; 

в

var output = ''; 

и это будет исправить вашу проблему. Вероятно, в вашем документе HTML есть элемент id = «output», по умолчанию элементы с идентификаторами отображаются как глобальные переменные с тем же именем, поэтому <a id="hello">text</a> будет отображаться как window.hello.