pass JSON Dictionary into html onclick

Question

I would like to write the following variable in the HTML code through JavaScript.

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

The problem is, when I look at the HTMl code in the browser, it doesn't show the corresponding variable, it shows

[object Object]

here the code to extend the HTML code

// 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>')

here the HTML code resulting output

<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>

If I do JSON.stringify(value['preview']) I get the following error:

Uncaught SyntaxError: missing ) after argument list

Can anybody help me? I don't know JavaScript so well.

Does this answer your question? [What does \[object Object\] mean?](https://stackoverflow.com/questions/4750225/what-does-object-object-mean) — Luca Kiebel, Jan 09 '22 at 15:03
Not realy I want to put the value of the [object Object] into the html code instead of the raw object. But I don't know how. When I try JSON.stringify(value['preview'] I get the following error: "Uncaught SyntaxError: missing ) after argument list" — domx4q, Jan 09 '22 at 15:09
That's because `JSON.stringify(value['preview']` **is** missing the `)` after the argument list ;-) — Luca Kiebel, Jan 09 '22 at 16:25

Tomalak · Accepted Answer · 2022-01-09T15:41:13.713

0

Don't use inline event handlers like onclick.

You're using jQuery. Create elements, find the button, attach an event to it, append the whole thing to a container.

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>

edited Jan 09 '22 at 15:41

answered Jan 09 '22 at 15:09

Tomalak

332,285
67
532
628

This answer looks really good, but for some reasons it doesn't work. When I click on the button nothing happens (the event listener seems to be not working because I added a console.log and nothing happend – domx4q Jan 09 '22 at 15:28
@domx4q Of course it works, click "Run code snippet" above. Not sure what your other code does. – Tomalak Jan 09 '22 at 15:34
Now it works, thanks, I had some own syntax issues when taking over – domx4q Jan 09 '22 at 15:52
@domx4q Yeah, I thought that might be just a glitch on your end. :) – Tomalak Jan 09 '22 at 15:55

score 0 · Answer 2 · answered Jan 09 '22 at 15:13

You want to write the literal JSON object to the HTML for viewing? You'll need to convert it to a string first. Like this:

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));

score 0 · Answer 3 · answered Jan 09 '22 at 15:13

I think this is what you want...

At some point in your code you are implicitly converting the object to a string, which will always return "[object Object]". Instead, use the JSON.stringify method.

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

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

This will convert the object into a string like "{'key': 'value'}"

The value of the body would then be

{'key': 'value'}

pass JSON Dictionary into html onclick

3 Answers3