如何在不出现意外标识符错误的情况下将对象作为函数的参数传递? [英] How to pass an object as function's parameter without getting Unexpected identifier error?

问题描述

我尝试将对象作为函数getReqDetail中的参数传递，但它返回了Uncaught SyntaxError:意外的标识符.但是，当我通过一个简单的值(整数，布尔值，字符串)作为参数，例如data [i] .id时，它就起作用了.那么我如何将对象作为参数传递

I tried to passed the object as parameter in function getReqDetail but it returned Uncaught SyntaxError: Unexpected identifier. But when i passed a simple value(integer,boolean,string) as parameter such as data[i].id, it worked. So how do i passed the object as parameter

数据/对象来自ajax函数jquery

the data/object is from ajax function jquery

function agetAllRequests(){
    $.ajax({
        type: 'GET',
        url: `http://localhost:8080/api/requests`,
        headers: {
            "Content-Type": "application/json", "Accept": "application/json"
        },
        dataType:"json",
        success: function (data) {
            console.log("yes. data: " + data);
            if (data) {
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        if(data[i]) {                            
                            console.log(data[i]);  
                            txt += `
                                    <tr class="hov" onclick="getReqDetails(${data[i]})">
                                           <td>${data[i].id}</td> 
                                           <td>${data[i].status}</td> 
                                           <td>${data[i].user.email}</td> 
                                           <td>${data[i].message}</td> 
                                           <td>${new Date(data[i].createdAt).toLocaleString()}</td>
                                    </tr>`;
                        }
                    }
                    if(txt){
                        $("#requestList").html(txt);
                    }
                }
            }
        },
        error: function (error) {
            console.log('errorCode: ' + error.status + ' . Message: ' + error.responseText);
        }
    });
}
function getReqDetails(data){
    console.log(data);
    return data;
}

注意:函数getReqDetails在ajax函数之外

EDIT : note: function getReqDetails is outside of ajax function

错误

推荐答案

该错误的原因是`onclick ="getReqDetails($ {data [i]})`将解析为一个字符串.由于 data [i] 不是字符串，因此将其转换为一个字符串，即"[object Object]".这使得 onclick 属性看起来像这样:

The reason for the error is that `onclick="getReqDetails(${data[i]})` will resolve to a string. Because data[i] is not a string it is converted to one, ie. "[object Object]". This makes the onclick attribute look like this:

onclick="getReqDetails([object Object])"

但是该代码不是有效的JavaScript，因此会出现错误.

But that code is not valid JavaScript, hence the error.

为了将 object 传递给函数，您实际上不应该使用 onclick 属性，该属性必须具有字符串值.而是按如下方式绑定点击处理程序:

In order to pass the object to the function, you should really not use the onclick attribute, which must have a string value. Instead bind a click handler, as follows:

    success: function (data) {
        console.log("yes. data: " + data);
        if (!data || !data.length) return;
        $("#requestList").empty(); // Clear whatever content there was before
        for (var i = 0; i < len; i++) {
            var item = data[i]; // Use a local variable to avoid repetition
            if(!item) continue;                            
            console.log(item);
            // Use jQuery methods to add the content and bind a click handler
            $("#requestList").append(
                $("<tr>").addClass("hov").append(
                    $("<td>").text(item.id),
                    $("<td>").text(item.status),
                    $("<td>").text(item.user.email),
                    $("<td>").text(item.message.id),
                    $("<td>").text(new Date(item.createdAt).toLocaleString())
                ).click(getReqDetails.bind(null, item)); // <-- click handler for TR
            );
        }
    },

这篇关于如何在不出现意外标识符错误的情况下将对象作为函数的参数传递?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！