将 JSON 字典传递到 html onclick [关闭]答案

【问题标题】：pass JSON Dictionary into html onclick [closed]将 JSON 字典传递到 html onclick [关闭]
【发布时间】：2022-01-09 14:58:04
【问题描述】：

我想通过 JavaScript 在 HTML 代码中编写以下变量。

{
  "content": "Hallo Welt, das ist ein Test\n",
  "filelength": 1,
  "filename": "a5c12c102bdaed8ee80168cb41606295eaf5512ba04045fac5dd0dc65c2f54f13566090025c05f14cdfdf9b1e39ce835c6f3262a4aedba31f8b6d07ed299b23b",
  "language": "plain",
  "path": "caadaf7ed1f27ea37cbb9157d9c6cff1683cae85244b772c856b660c3609ad32faa0d6997ecaf727c46650443f1a03f63c0f67219f46d10cf5295556579422b6/c6ee9e33cf5c6715a1d148fd73f7318884b41adcb916021e2bc0e800a5c5dd97f5142178f6ae88c8fdd98e1afb0ce4c8d2c54b5f37b30b7da1997bb33b0b8a31/a5c12c102bdaed8ee80168cb41606295eaf5512ba04045fac5dd0dc65c2f54f13566090025c05f14cdfdf9b1e39ce835c6f3262a4aedba31f8b6d07ed299b23b",
  "type": "text"
}

问题是，当我在浏览器中查看HTMl代码时，并没有显示对应的变量，而是显示

[object Object]

这里是扩展 HTML 代码的代码

// create the row
let row = "<tr>";

// set the actions
let actions_append = '';
// file
if (value['type'] === 'file') {
    // preview
    if (value['preview_available']) {
        console.log(value["preview"]);
        actions_append += `<td nowrap width="1%">
                                <span data-toggle="tooltip" title="Vorschau" onclick="setPreviewContent(${value['preview']})">
                                    <button onclick="setNames('${value['name']}')" type="button" class="btn btn-link btn-sm"
                                        data-toggle="modal" data-target="#previewModal"><i class="material-icons text-primary">desktop_windows</i>
                                    </button>
                                </span>
                            </td>`
    }
}
// append row to table
$('#fileTableBody').append(row + actions_append + '</tr>')

这里是 HTML 代码结果输出

<td width="1%" nowrap="">
<span data-toggle="tooltip" title="Vorschau" onclick="setPreviewContent('[object Object]')">
    <button onclick="setNames('test.txt')" type="button" class="btn btn-link btn-sm"
            data-toggle="modal" data-target="#previewModal"><i class="material-icons text-primary">desktop_windows</i>
    </button>
</span>
</td>

如果我这样做JSON.stringify(value['preview']) 我收到以下错误：

Uncaught SyntaxError: missing ) after argument list

有人可以帮我吗？我不太了解 JavaScript。

【问题讨论】：

这能回答你的问题吗？ What does [object Object] mean?
不是真的我想将 [object Object] 的值放入 html 代码而不是原始对象。但我不知道怎么做。当我尝试 JSON.stringify(value['preview'] 时，我收到以下错误：“Uncaught SyntaxError: missing ) after argument list”
那是因为JSON.stringify(value['preview'] 是在参数列表后面缺少) ;-)

标签： javascript html jquery json

【解决方案1】：

不要使用像 onclick 这样的内联事件处理程序。

您正在使用 jQuery。创建元素，找到按钮，将事件附加到它，将整个东西附加到容器中。

const value = {type: 'file', preview_available: true, name: 'Hi!'};

if (value.type === 'file' && value.preview_available) {
    const $td = $(`
        <td nowrap width="1%">
            <span data-toggle="tooltip" title="Vorschau">
            <button type="button" class="btn btn-link btn-sm" data-toggle="modal" data-target="#previewModal">
                <i class="material-icons text-primary">desktop_windows</i>
            </button>
            </span>
        </td>
    `);

    $td.find("button").click(function () {
        alert(value.name);
        //setNames(value.name);
    });

    $("<tr>").append($td).appendTo('#fileTableBody');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="fileTableBody"></table>

【讨论】：

这个答案看起来非常好，但由于某些原因它不起作用。当我单击按钮时，没有任何反应（事件侦听器似乎无法正常工作，因为我添加了一个 console.log 并且没有发生任何事情
@domx4q 当然可以，点击上面的“运行代码sn-p”。不确定您的其他代码是做什么的。
现在可以了，谢谢，我接手时遇到了一些语法问题
@domx4q 是的，我认为这可能只是你的一个小故障。 :)

【解决方案2】：

您想将文字 JSON 对象写入 HTML 以供查看？您需要先将其转换为字符串。像这样：

var obj = {
  "content": "Hallo Welt, das ist ein Test\n",
  "filelength": 1,
  "filename": "a5c12c102bdaed8ee80168cb41606295eaf5512ba04045fac5dd0dc65c2f54f13566090025c05f14cdfdf9b1e39ce835c6f3262a4aedba31f8b6d07ed299b23b",
  "language": "plain",
  "path": "caadaf7ed1f27ea37cbb9157d9c6cff1683cae85244b772c856b660c3609ad32faa0d6997ecaf727c46650443f1a03f63c0f67219f46d10cf5295556579422b6/c6ee9e33cf5c6715a1d148fd73f7318884b41adcb916021e2bc0e800a5c5dd97f5142178f6ae88c8fdd98e1afb0ce4c8d2c54b5f37b30b7da1997bb33b0b8a31/a5c12c102bdaed8ee80168cb41606295eaf5512ba04045fac5dd0dc65c2f54f13566090025c05f14cdfdf9b1e39ce835c6f3262a4aedba31f8b6d07ed299b23b",
  "type": "text"
}

$('#myElement').append(JSON.stringify(obj));

【讨论】：

【解决方案3】：

我想这就是你想要的......

在您的代码中的某个时刻，您将对象隐式转换为字符串，该字符串将始终返回“[object Object]”。相反，请使用JSON.stringify 方法。

var myObject = {
    "key": "value"
};

$("body").append(JSON.stringify(myObject));

这会将对象转换为像"{'key': 'value'}"这样的字符串

body 的值就是

{'key': '值'}

【讨论】：