Question

由于某种原因，如果我有一个看起来像这样的对象：

let clients = [{
  "id": 1,
  "first_name": "Felipe",
  "last_name": "Aiken",
  "email": "faiken0@360.cn",
  "gender": "Male",
  "ip_address": "13.189.73.39"
}, {
  "id": 2,
  "first_name": "Renell",
  "last_name": "Andreone",
  "email": "randreone1@histats.com",
  "gender": "Female",
  "ip_address": "196.153.244.124"
}];

，然后像这样在forEach循环中使用：

clients.forEach(function(client) {
    console.log(client);
    let tbody = document.querySelector('tbody');
    let newObj = {
        'name': 'client.first_name'
    };
    tbody.innerHTML = tbody.innerHTML + '\
        <tr>\
            <td>' + client.id + '</td>\
            <td>' + client.first_name + '</td>\
            <td>' + client.last_name + '</td>\
            <td>' + client.email + '</td>\
            <td>' + client.gender + '</td>\
            <td><button onclick="setClientInfo(' + (newObj) + ')" class="btn btn-primary">View</td>\
        </tr>\
    ';
});

当我为任何项目单击“查看”按钮时，在控制台中出现以下代码的“意外错误”：

setClientInfo([object Object])

setClientInfo函数看起来像这样：

function setClientInfo(client) {
    console.log(client);
}

对此将提供任何帮助。

欢呼

Answer 1

onclick处理程序在html上呈现为字符串，因此默认情况下对象文字呈现为[object Object]，只需尝试在开发控制台中运行它即可：

"" + {key: "value"}

结果如下：

<button onclick="setClientInfo([object Object])" />

handler不是有效的JS，错误报告。如果您确实想将对象值内联到HTML，则可以将newObject更改为字符串类型，例如：

let newObj = "{'name': 'client.first_name'}";

因此您的处理程序将如下所示：

<button onclick="setClientInfo({'name': 'client.first_name'})" />

总的来说，这仍然不是一个好主意。正如已经提到的其他答案/评论一样，最好仅传递标识符以单击处理程序函数，然后使用它在JS代码中查找所需的对象。

Answer 2

正如我们的朋友 @Archer 在评论中所说，将client.id传递给功能setClientInfo，然后在该功能内部，找到需要使用该{{ 1}}。下面的代码可以帮助实现这一点。

id

let clients = [{
  "id": 1,
  "first_name": "Felipe",
  "last_name": "Aiken",
  "email": "faiken0@360.cn",
  "gender": "Male",
  "ip_address": "13.189.73.39"
}, {
  "id": 2,
  "first_name": "Renell",
  "last_name": "Andreone",
  "email": "randreone1@histats.com",
  "gender": "Female",
  "ip_address": "196.153.244.124"
}];

clients.forEach(function(client) {
    let tbody = document.querySelector('tbody');
    let newObj = {
        'name': 'client.first_name'
    };
    tbody.innerHTML = tbody.innerHTML + '\
        <tr>\
            <td>' + client.id + '</td>\
            <td>' + client.first_name + '</td>\
            <td>' + client.last_name + '</td>\
            <td>' + client.email + '</td>\
            <td>' + client.gender + '</td>\
            <td><button onclick="setClientInfo(' + client.id + ')" class="btn btn-primary">View</td>\
        </tr>\
    ';
});

function setClientInfo(clientId){
  console.log(clientId)
  var client = clients.find(x => x.id == clientId);
  console.log(client)
}

另一种方法是不使用字符串创建元素，而是通过<table> <tbody></tbody> </table>附加元素，而是使用innerHTML创建元素本身，然后可以将obj作为参数传递给侦听器。如下所示：

document.createElement()

let clients = [{
      "id": 1,
      "first_name": "Felipe",
      "last_name": "Aiken",
      "email": "faiken0@360.cn",
      "gender": "Male",
      "ip_address": "13.189.73.39"
    }, {
      "id": 2,
      "first_name": "Renell",
      "last_name": "Andreone",
      "email": "randreone1@histats.com",
      "gender": "Female",
      "ip_address": "196.153.244.124"
    }];

    clients.forEach(function(client) {
        let tbody = document.querySelector('tbody');
        let newObj = {
            'name': 'client.first_name'
        };
        var trElem = document.createElement("tr");

        //LOOPING TRHOUGH ALL CLIENT PROPERTIES
        for (var prop in client){
            var tdElem =  document.createElement("td");
            tdElem.textContent = client[prop];
            trElem.append(tdElem)            
        }      

        //Create the last td with the Button
        var tdClick = document.createElement("td");
        var btn = document.createElement("button")
        tdClick.append(btn);
        btn.onclick = setClientInfo.bind(this, client)
        btn.className = "btn btn-primary";
        btn.textContent = "View"
        trElem.append(tdClick);
        
        //Append to table body
        tbody.append(trElem);
    });

    function setClientInfo(client){
      console.log(client)
    }

将forEach中的当前对象传递给函数

2 个答案: