让foreach在javascript循环中一一显示？

Question

我正在尝试通过在 javascript 循环中使用 foreach 来在页面中显示来自多个类别的最新帖子，但是 foreach 将它们一一显示，如下图所示：

我想在每个元素中显示一个，而不是在每个元素中都显示。

for (var i in books) { //Start JS Code
    var html = '<div class="row"><div class="book_history">';
        // JS Output

    <?php // Start PHP
    $catids = array(39, 37, 2); // Category for test
    foreach ( $catids as $catid ) {

        $my_query = new WP_Query( array(
        'cat' => $catid,
        'ignore_sticky_posts' => 1,
        'posts_per_page' => 1,
        'no_found_rows' => true ) 
        );

        if ( $my_query->have_posts() ) :

                while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
                    html += '<a href="<?php the_permalink(); ?>">»Chapter <?php the_title(); ?></a></div>'; // Javascript Code, Displaying the result of foreach with js
            <?php endwhile;

        endif;

        wp_reset_postdata();
    } ?> // End PHP

        $bookcontainer.append(html); // Insert all result of foreach and js into some element

} // End JS Code

有什么解决办法吗？ *JavaScript 的分类顺序是一样的。

Answer 1

由于 PHP 是在服务器端呈现的，因此不能以这种方式将它与 JavaScript 结合起来。

但您可以将 JSON 传递给 JavaScript 以解析结构并将其显示在网站上。

假设您的数据有以下数组：

$data = array(
    array(
        'category_id' => 39,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'First chapter',
            )
        ),
    ),
    array(
        'category_id' => 37,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'Second chapter',
            )
        ),
    ),
    array(
        'category_id' => 42,
        'chapters' => array(
            array(
                'link' => 'http://google.de',
                'chapter_name' => 'Third chapter',
            )
        ),
    ),
);

您可以使用json_encode($data) 简单地输出此数组的 JSON 表示形式（确保将其回显到 JS 变量中）。

然后您可以使用 JavaScript 轻松读取它。这是一个不错的代码笔：https://codepen.io/YannickFricke/pen/Vqzoob

关于 forEach 函数的简要说明：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach