首页 > 解决方案 > 将对象从 getJSON 传递到外部函数?

问题描述

我正在尝试将对象“值”传递给“hello()”函数,但出现以下错误:

SyntaxError: missing ] after element list note: [ 在第 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);
}

我在这里做错什么了吗?

标签: jquery

解决方案


您正在尝试将对象附加到字符串:

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

...导致toString在对象上被调用,通常转换为:

[Object object]

...因此出现语法错误,因为您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);

推荐阅读