pass JSON Dictionary into html onclick-CodePudding

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" 
                                        data-toggle="modal" data-target="#previewModal"><i >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" 
            data-toggle="modal" data-target="#previewModal"><i >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.

CodePudding user response：

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"  data-toggle="modal" data-target="#previewModal">
                <i >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>

CodePudding user response：

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

CodePudding user response：

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