时间戳

首页 > 解决方案 > 将 forEach 中的当前对象传递给函数

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

问题描述

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

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

对此的任何帮助将不胜感激。

干杯

标签： javascriptjsonobject

解决方案

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 代码中查找所需的对象。

推荐阅读