Question

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

数据/对象来自ajax函数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函数之内

the error

Answer 1

Template literals允许在运行时填充变量（${myVar}，但结果始终为字符串，因此对模板的求值将为getReqDetails([object Object])。

您可以做的是从对象中呈现可序列化的值或存储对索引的引用，然后在调用的函数getReqDetails()中对其进行处理。

尝试将简单值传递给您的字符串函数：

var data = [{id: 1},{id: 2}, {id: 3},];
if (data) {
    var len = data.length;
    var txt = ``;
       if (len > 0) {
         for (var i = 0; i < len; i++) {
            if(data[i]) {                           
            txt += `
            <tr class="hov" onclick="getReqDetails(${data[i].id})">
                  <td>...<td>
            </tr>`;}
}
if(txt){
           $("#requestList").html(txt);
}
}
function getReqDetails(reqId){
     console.log(reqId)
     return reqId;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="requestList" />

Answer 2

首先，我认为success函数位于AJAX语句的onclick项目内部是有问题的。由于它是Uncaught SyntaxError: Unexpected identifier函数，因此我认为它应该是全局定义的。

回答您的主要问题，当您在语法上遇到代码问题时，通常会调用if。您可能会有多余的/缺少的括号，双括号等。

查看代码中的第二条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>...<td> </tr>`; } }语句，方括号有一些问题。它应该看起来像这样：

这是我所做的更改：

我删除了if (len > 0) {中的for，因为您只有一个其中的}语句。
我为for语句添加了另一个右括号（getReqDetails）。

我希望这可以解决您的问题。我建议您使用Look here或Visual Studio Code之类的功能强大的代码编辑器来突出显示语法，进行错误检查，调试等等。如果您喜欢在终端上工作，建议使用Atom。

此外，我强烈建议您在AJAX语句之外定义length函数。我认为，您的代码使用整数作为输入的原因是因为Javascript（如果我没记错的话）上的数字没有len属性-这导致您的脚本没有调用任何错误，因为null的值为${data[i]}。

编辑

由于您希望对象成为onclick函数的参数，因此需要首先将其转换为字符串。您可以通过将${JSON.stringify(data[i])}替换为getReqDetails来实现。然后在JSON.parse()函数上，使用txt函数将参数读取为对象。

更新后的<tr class="hov" onclick="getReqDetails(${JSON.stringify(data[i])})"> <td>...<td> </tr>变量

txt + = getReqDetails;

更新了function getReqDetails(stringifiedObject){ var data = JSON.parse(stringifiedObject) console.log(data); return data; }功能：

{{1}}

Answer 3

错误的原因是data[i]将解析为字符串。由于onclick不是字符串，因此将其转换为1。 “ [对象对象]”。这使得onclick="getReqDetails([object Object])"属性看起来像这样：

onclick

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

为了将 object 传递给函数，您实际上不应使用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 ); } },属性，该属性必须具有字符串值。而是按如下方式绑定点击处理程序：

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    Utils.log(TAG, "onRequestPermissionsResult call");
    if (requestCode == REQUEST_CAMERA_PERMISSION) {
        if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            Utils.log(TAG, "Permission granted - show camera");
            if (ActivityCompat.checkSelfPermission(requireContext(), Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {
                try {
                    cameraSource.start(surfaceView.getHolder());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

Answer 4

您必须解析为 JSON 字符串化并清理特殊字符：

var json = JSON.stringify(data[i]).replace(/\"/g,"'")

现在开始工作了！

如何在不出现意外标识符错误的情况下将对象作为函数的参数传递？

4 个答案: