如何将PHP数组传递给JS用于循环（WordPress主题开发场景）

嘿，我来帮你搞定这个问题！首先得纠正一个关键误解：JavaScript运行在浏览器端，没办法直接和WordPress的数据库通信，必须通过PHP作为中间层把数据传递到前端，这也是你现在需要解决的核心环节。下面是一套符合WordPress规范的完整解决方案：

1. 用ACF函数提取并整理重复字段数据 #

首先在你的WordPress模板文件（比如自定义页面模板、文章模板）里，通过ACF的核心函数把重复字段的数据提取出来，整理成结构化的PHP数组：

<?php
// 假设你的ACF重复字段名为"pie_chart_items"
$pie_chart_dataset = array();

// 检查是否存在重复字段数据
if (have_rows('pie_chart_items')) :
    while (have_rows('pie_chart_items')) : the_row();
        // 假设每个重复项包含"item_label"（饼图项名称）和"item_value"（对应数值）两个子字段
        $chart_item = array(
            'label' => get_sub_field('item_label'),
            'value' => get_sub_field('item_value')
        );
        $pie_chart_dataset[] = $chart_item;
    endwhile;
endif;
?>

2. 安全地将PHP数组传递给JavaScript #

这里有两种常用且安全的方法，推荐优先用第一种符合WordPress规范的方式：

方法一：用wp_localize_script()（官方推荐） #

这是WordPress官方认可的PHP数据传递方式，能避免XSS风险，还能和脚本加载流程完美结合：

第一步：在functions.php里注册并传递数据

function load_pie_chart_assets() {
    // 注册你的饼图JS文件（假设路径是主题根目录下的/js/pie-chart.js）
    wp_register_script(
        'custom-pie-chart',
        get_template_directory_uri() . '/js/pie-chart.js',
        array('jquery'), // 依赖jQuery（如果你的饼图库需要的话）
        '1.0',
        true // 在页脚加载，优化性能
    );

    // 再次获取ACF数据（如果模板里的数组无法全局调用，就把第一步的代码复制到这里）
    $pie_chart_dataset = array();
    if (have_rows('pie_chart_items')) :
        while (have_rows('pie_chart_items')) : the_row();
            $chart_item = array(
                'label' => get_sub_field('item_label'),
                'value' => get_sub_field('item_value')
            );
            $pie_chart_dataset[] = $chart_item;
        endwhile;
    endif;

    // 把PHP数组传递给JS，命名为`pieChartData`（前端可以直接用这个变量）
    wp_localize_script('custom-pie-chart', 'pieChartData', $pie_chart_dataset);

    // 加载脚本
    wp_enqueue_script('custom-pie-chart');
}
add_action('wp_enqueue_scripts', 'load_pie_chart_assets');

第二步：在JS文件里使用传递来的数据

比如用Chart.js绘制饼图的示例：

document.addEventListener('DOMContentLoaded', function() {
    // 获取画布元素（假设HTML里有<canvas id="pie-chart"></canvas>）
    const chartCtx = document.getElementById('pie-chart').getContext('2d');
    
    // 用传递来的pieChartData生成饼图
    new Chart(chartCtx, {
        type: 'pie',
        data: {
            labels: pieChartData.map(item => item.label),
            datasets: [{
                data: pieChartData.map(item => item.value),
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
            }]
        }
    });
});

方法二：直接在模板里嵌入JSON（快速场景） #

如果是简单的单页面场景，也可以直接在模板的HTML中嵌入脚本，用wp_json_encode()安全转换数据：

<!-- 在模板的合适位置（比如页脚）添加这段代码 -->
<script>
// 用wp_json_encode()处理转义和编码，避免JS语法错误
const pieChartData = <?php echo wp_json_encode($pie_chart_dataset); ?>;

// 初始化饼图的代码
document.addEventListener('DOMContentLoaded', function() {
    // 这里直接使用pieChartData变量即可
});
</script>

3. 避坑提醒 #

• 确保ACF字段名、子字段名完全匹配，ACF的字段名称是大小写敏感的！
• 不要用原生的json_encode()，一定要用wp_json_encode()，它会自动处理WordPress的字符编码和转义，避免安全问题。
• 如果是在自定义文章类型模板里调用，记得给have_rows()传递文章ID：have_rows('pie_chart_items', $post_id)

这样就能顺利把ACF重复字段的PHP数据传递给JavaScript饼图了！

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