如何在JavaScript中使用PHP foreach循环注入Instagram动态数据

1. PHP变量传入JavaScript的实现方式 #

直接将后端的$stories数组序列化为JSON格式输出到前端JS上下文即可，这是最安全且不易出错的方案，可避免手动拼接字符串带来的语法错误和XSS风险。
首先在PHP侧预处理需要传给JS的字段，过滤无用信息：

<?php
// 预处理要传给JS的stories数据，只保留需要的字段
$js_stories = [];
foreach ($stories as $story) {
    $media = $story['media_info'];
    $js_stories[] = [
        'id' => $media['id'], // 若无自带id可自行生成唯一标识
        'username' => $media['username'],
        'avatar' => '', // 按需补充用户头像地址
        'permalink' => $media['permalink'],
        'media_type' => $media['media_type'],
        'media_url' => $media['media_url'],
        'thumbnail_url' => $media['thumbnail_url'] ?? '',
        'timestamp' => strtotime($media['timestamp']) * 1000 // 转成JS需要的毫秒时间戳，可按需调整
    ];
}
?>

之后在JS代码所在的页面，将处理好的数组输出为JS变量：

// 直接在PHP渲染的页面中写入这段代码即可获取后端数据
const storyList = <?php echo json_encode($js_stories, JSON_HEX_TAG | JSON_UNESCAPED_UNICODE); ?>;

2. JS遍历生成动态内容的实现 #

拿到storyList数组后，直接用数组的map方法遍历，转换为Zuck.buildTimelineItem要求的格式即可，示例代码如下：

const stories = storyList.map((story, index) => {
    // 生成单条内容项
    const storyItem = [
        `${story.id}-${index}`,
        story.media_type === 'VIDEO' ? 'video' : 'photo',
        story.media_type === 'VIDEO' ? 0 : 3, // 视频时长可填实际值，图片默认展示3秒
        story.media_url,
        story.media_type === 'VIDEO' ? story.thumbnail_url : story.media_url,
        story.permalink,
        '查看Instagram原文',
        false,
        story.timestamp
    ];
    // 生成timeline项
    return Zuck.buildTimelineItem(
        story.id,
        story.avatar,
        story.username,
        story.permalink,
        story.timestamp,
        [storyItem]
    );
});

以上代码会自动遍历所有PHP传递的story数据，生成对应格式的数组，直接替换原来写死的stories数组即可实现动态加载。

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