Uncaught syntax error when passing an object to a function in javascript

Question

I have the following function which has a button and when clicking the button it triggers another function.

function navbar(id,CSVdata) {
        if(CSVdata){
           console.log('CSVdata',CSVdata)
           return `<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a id="downloadcsv${id}" class="dropdown-item" href="#" onclick="downloadCSV(${id},${CSVdata})">Download CSV</a>
                   </div>
            `;
        }
 }

function downloadCSV(id,data) {
    console.log("downloadcsv",data);
}

The thing is when i console my CSVdata data it's showing correctly in the console. When i try to pass it to my downloadCSV function i'm getting an error as Uncaught SyntaxError:Unexpected identifier and the passed object is shown as downloadCSV(lc,[object Object]) What could be the issue here? I tried stringifying the object but still the same error.

CertainPerformance · Accepted Answer · 2020-12-04 06:21:43Z

3

To pass the object to the inline handler, you'll have to serialize it for the HTML markup. But this is extremely ugly. Inline handlers are bad practice (due in part to the problems you're experiencing) - there's no real reason to use them nowadays. Instead, add the listener properly with JavaScript and addEventListener:

function navbar(id,CSVdata) {
    if(!CSVdata) return;
    const fragment = new DocumentFragment();
    fragment.innerHTML = `
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a id="downloadcsv${id}" class="dropdown-item" href="#">Download CSV</a>
        </div>
    `;
    fragment.querySelector('a').addEventListener('click', () => {
        downloadCSV(id, CSVdata);
    });
    return fragment;
}

answered Dec 4, 2020 at 6:21

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abir Taheer · Accepted Answer · 2020-12-04 06:22:22Z

I think you're trying to pass an object as an argument into an inline JavaScript function call. I highly recommend trying something else because there's almost certainly a better way but if you want to try it, you can encode the object as a JSON string before you combine it into the html code.

function navbar(id,CSVdata) {
        if(CSVdata){
           console.log('CSVdata',CSVdata)
           return `<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a id="downloadcsv${id}" class="dropdown-item" href="#" onclick='downloadCSV(${id},${JSON.stringify(CSVdata)})'>Download CSV</a>
                   </div>
            `;
        }
 }

function downloadCSV(id,data) {
    console.log("downloadcsv",data);
}

Collectives™ on Stack Overflow

Uncaught syntax error when passing an object to a function in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related