将PHP关联数组传递给JS函数触发SyntaxError该如何解决？

你遇到的语法错误核心是HTML属性引号和JSON字符串引号嵌套冲突：
你给onclick属性用了双引号包裹，内联传参时第二个参数又用了双引号，同时json_encode默认输出的JSON字符串本身也是双引号包裹，直接把onclick属性提前截断，HTML解析时语法断裂，就会抛出Unexpected end of input错误。

方案1：快速修复内联传参写法 #

对JSON结果做HTML转义，同时修正引号嵌套逻辑即可：

foreach ($staff->roles as $role) {
    $actionRoles .= $role->name . ',';
    array_push($selected_roles,['id'=>$role->id,'name'=>$role->name]);
}
// 转义JSON里的特殊字符和引号，适配HTML属性场景
$rolesJson = htmlspecialchars(json_encode($selected_roles), ENT_QUOTES);
$tableAction = '
<div class="menu-item px-3">
    <!-- 用转义后的单引号包裹JSON参数 -->
    <a onclick="editStaff(this, \''.$rolesJson.'\')" >
        Edit
    </a>
</div>
';

方案2：使用data属性传递（更推荐，易维护） #

避免内联事件的引号嵌套问题，把数据存在自定义属性里，通过JS事件监听获取：

PHP代码修改 #

foreach ($staff->roles as $role) {
    $actionRoles .= $role->name . ',';
    array_push($selected_roles,['id'=>$role->id,'name'=>$role->name]);
}
$rolesJson = htmlspecialchars(json_encode($selected_roles), ENT_QUOTES);
$tableAction = '
<div class="menu-item px-3">
    <!-- 数据存在data属性里，去掉内联onclick -->
    <a class="edit-staff-btn" data-roles="'.$rolesJson.'" >
        Edit
    </a>
</div>
';

JS绑定事件 #

// 全局绑定编辑按钮点击事件
document.querySelectorAll('.edit-staff-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 直接解析data属性里的JSON为JS数组
        const selectedRoles = JSON.parse(this.dataset.roles);
        // 调用原有编辑函数
        editStaff(this, selectedRoles);
    })
})

如果用方案1的内联传参，函数内先解析JSON即可：

function editStaff(el, rolesJson) {
    // 把JSON字符串转成JS数组
    const roles = JSON.parse(rolesJson);
    // 正常使用数组，比如遍历取值
    roles.forEach(role => {
        console.log('角色ID：', role.id, '角色名：', role.name);
    })
}

如果用方案2的data属性方案，传入的已经是解析完成的数组，直接使用即可。

内容的提问来源于stack exchange，提问作者Swift Solutions