Jquery 将对象从getJSON传递到外部函数？

我试图将对象“value”传递给“hello（）”函数，但出现以下错误：

SyntaxError:缺少]在元素列表注释之后：[在第1行打开， 第6栏

我的代码：

$(document).ready(function(){
    $.getJSON("http://localhost:8080/api/users/all", function(result){
        $.each(result, function(key,value) {
            $("#data").append(
              '<li class="list-group-item\">' + 
                value.name + 
                '<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>' + 
                '<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>' + 
              '</li>');
        });
    });
});

function hello(value) {
    console.log("hello" + value.name);
}

$（文档）.ready（函数（）{
$.getJSON（“http://localhost:8080/api/users/all，函数（结果）{
$。每个（结果、函数（键、值）{
$（“#数据”）。追加(
“
”+
value.name+
“查看欧几里德”+
“查看建议”+
“
”）；
});
});
});
函数hello（值）{
log（“hello”+value.name）；
}

---

这里有什么我做错的吗？

您试图将对象附加到字符串：

'<a class="btn btn-light float-right" onclick="hello(' + value + ')" role="button">View Euclidean</a>'

…因此出现语法错误，因为您的

onclick

现在将是：

hello([Object object])

…这是一个语法错误

您可能打算执行

+JSON.stringify（value）+

更好的方法是不通过字符串操作创建单击处理程序：

const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
euclideanLink.click(e => {
  e.preventDefault();
  hello(value.name);
  return false;
});
const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

const listItem = $('<li class="list-group-item"/>');
listItem.append(value.name, euclideanLink, recommendsLink);

$("#data").append(listItem);

常量欧几里德链接=$（“视图欧几里德”）； 欧几里德链接。单击（e=>{ e、 预防默认值（）； hello（value.name）； 返回false； }); const recommendsLink=$（“查看建议”）； 常量listItem=$（'

）； listItem.append（value.name、欧几里德链接、推荐链接）； $（“#数据”）。追加（列表项）；

---

我强烈建议您将标记与javascript分离，并将事件处理程序动态绑定到链接，这样您就不必担心将其转换为字符串或其他内容

/$（文档）.ready（函数（）{
//$.getJSON（“http://localhost:8080/api/users/all，函数（结果）{
//伪造一些结果，这样我们就可以看到逻辑在起作用
var结果=[
{id:1，名字：'Jane'}，
{id:2，名字：'Jim'}
];
//从页面上的模板获取html，这样我们就不必放置
//它在脚本中
var userTemplate=$（'#userTemplate'）.html（）；
$（“#数据”）。追加(
//创建要添加到数据中的所有元素的数组
//这样做可以让我们附加一次，从而减少我们添加的次数
//触摸DOM
$.map（结果、函数（值）{
//用我们的真实姓名替换模板中的{name}}
var$newUser=$（userTemplate.replace（/\{{name\}}}/，value.name））；
//找到第一个链接并将单击处理程序绑定到它
$newUser.find（'view.euclidean'）。on（'click'，function（）{
你好（值）；
});
返回$newUser；
})
);
//  });
//});
函数hello（值）{
log（“hello”+value.name）；
}

{{name}}
欧几里得观点
查看建议

什么是示例值？您遇到了一个语法错误！如果值是一个对象，如果您打算坚持这样的内联绑定（您应该重新考虑），我建议您

JSON.stringify（值）

用于onclick。您正在创建一个文本字符串。文本字符串中没有任何对象。@Taplar该对象只包含and id和一个名称。假设id:1，name:'Fred'。@Lithicas:您必须将参数括在引号中。

onclick

的内容必须是有效的JS，嵌入HTML属性中。这不起作用，我知道t ReferenceError:Lisa未定义，其中Lisa是名称。是的，您将希望传递序列化对象。或者，请参阅我的编辑，以了解执行单击处理程序而不将其填充到字符串中的方法。

const euclideanLink = $('<a class="btn btn-light float-right" role="button">View Euclidean</a>');
euclideanLink.click(e => {
  e.preventDefault();
  hello(value.name);
  return false;
});
const recommendsLink = $('<a class="btn btn-dark float-right mr-1 text-light" role="button">View Recommendations</a>');

const listItem = $('<li class="list-group-item"/>');
listItem.append(value.name, euclideanLink, recommendsLink);

$("#data").append(listItem);