点击链接后用PHP数组元素填充DIV的技术实现问题

需求 #

• 展示事件链接列表，点击链接后在同一页面指定DIV中显示对应事件详情

实现步骤 #

• 通过PHP从Neo4j数据库查询状态为not_processed的事件，构建以UUID为键的二维数组$eventInfo
• 基于该数组生成带data-id属性的事件链接列表
• 创建用于展示详情的DIV容器

遇到的问题 #

尝试将PHP数组通过json_encode传递给JavaScript，点击链接时获取UUID并尝试访问数组元素填充DIV，出现Uncaught TypeError: passedArray[p] is undefined错误，无法正确定位对应元素。

解决方案 #

将PHP输出的JSON字符串解析为JS数组，使用find方法匹配UUID对应的对象，提取eventBody填充至目标DIV。核心代码如下：

function findme(p) {
    // 将PHP数组转为JSON字符串后解析为JS数组
    var passedArray = JSON.parse('<?php echo json_encode($test_array); ?>');
    
    // 查找UUID匹配的事件对象
    var result = passedArray.find((obj) => {
        return obj.UUID === p;
    });

    // 将事件详情填充到指定DIV
    document.getElementById("result").innerHTML = result.eventBody;
}

说明：原错误原因是直接将PHP关联数组转为JSON后，在JS中是对象而非数组，无法通过UUID作为下标直接访问；转为数组后使用find方法匹配UUID即可正确获取对应事件对象。

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