对象未定义/HTMLElement 分别使用 jQuery 输出答案

【问题标题】：Object undefined/HTMLElement being output using jQuery each对象未定义/HTMLElement 分别使用 jQuery 输出
【发布时间】：2015-03-01 13:48:07
【问题描述】：

我正在使用 jQuery 的 each/getJSON 循环遍历我的 data.json 文件，抓取并格式化数据，然后将其输出到我的页面上的 #output div 中。

它按预期工作，除了 [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] 被添加到输出中？

【问题讨论】：

这一定不是您的实际代码，因为您显示的内容不会在 [object HTMLElement] 前面，尽管它会在 undefined 前面。我猜你在循环之前实际上没有var output;，或者其他东西。

标签： javascript jquery json parsing getjson

【解决方案1】：

这对我来说看起来像变量 output allready 之前使用过并填充了一个 html 元素。
在您的情况下，它是您的包装器 div，其 id 为 output，它作为全局变量公开。

你应该能够通过给输出提供初始值来克服这个问题：

var output = '';

因为使用var 不会清理现有变量：

var output = 'Lorem ipsum';
var output;

alert(output)

【讨论】：

【解决方案2】：

改变

var output;

到

var output = '';

这将解决您的问题。您的 HTML 文档中可能有一个 id="output" 的元素，默认情况下，具有 id 的元素作为同名的全局变量公开，因此<a id="hello">text</a> 将显示为window.hello。

【讨论】：