在 JS 中循环遍历数组并为 HTML 提要生成帖子 bootstrap？

Question

所以我在 HTML 中有一个基本的 Bootstrap 网站，设置为新闻提要，我试图用不同的 post 填充它。在 Javascript 中，我有包含不同图像、标题和标题的数组，我想使用它们在新闻提要中生成 post。我的第一个想法是循环遍历数组并为每个 post 生成 HTML 代码，然后使用 Javascript 将该代码插入提要 <div>。

但是，我一直在 Javascript 中使用字符串变量来存储每个 post 的通用 HTML 代码，并将它们与图像 url、标题文本连接起来等为每个 post 创建代码块。这真的很尴尬，让我觉得必须有一种更有效的方法来为提要中的内容 post 生成代码。

有谁知道以编程方式创建 post 以填充此提要的更有效方法吗？理想情况下，我将能够避免只为每个 post 手动编写 HTML（我正在尝试创建 >50 个 post）并且我会有一些控制权在 posts 等的顺序上

这里是 HTML

的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>NewsMe Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="#">NewsMe</a>
  <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
          <br></br>
            <h2>News Feed</h2>
<!--             <p>Find all the </p> -->
        </div>
  <a href="https://ibb.co/YjH9b25"></a>
    </div> 
    <div class="row" id="feed">
        <div class="col-md-9">
            <div class="row mb-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/product14-600x600.jpg">
                                </div>
                                <div class="col-md-9">
                                    <div class="card-body">
                                        <div class="news-content">
                                            <a href="#"><h2>Headline 1</h2></a>
                                            <p>Caption 1 </p>

                                        </div>
                                        <div class="news-footer">
                                        <div class="news-author">
                                            <ul class="list-inline list-unstyled">
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-user"></i>
                                                    Author
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-user"></i>
                                                    News
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-eye"></i>
                                                    110 Views
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-calendar"></i>
                                                    26 June 2018
                                                </li>
                                            </ul>
                                        </div>   
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/product14-600x600.jpg">
                                </div>
                                <div class="col-md-9">
                                    <div class="card-body">
                                        <div class="news-content">
                                            <a href="#"><h2>Headline 2  </h2></a>
                                            <p>Caption 2</p>

                                        </div>
                                        <div class="news-footer">
                                        <div class="news-author">
                                            <ul class="list-inline list-unstyled">
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-user"></i>
                                                    Author
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-eye"></i>
                                                    110 Views
                                                </li>
                                                <li class="list-inline-item text-secondary">
                                                    <i class="fa fa-calendar"></i>
                                                    26 June 2018
                                                </li>
                                            </ul>
                                        </div>   
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-md-12">
                    <ul class="pagination">
                      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                      <li class="page-item"><a class="page-link" href="#">1</a></li>
                      <li class="page-item active"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                      <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>
            </div>

        </div>
<!--        <div class="col-md-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <img src="http://eskimo.egemenerd.com/wp-content/uploads/2018/05/blog17.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>
</body>


</html>

CSS:

body {
  padding: 0;
  margin: 0;
  background: #e2e5ee;
  font-family: "Segoe UI";
}

/*--- navigation bar ---*/

.navbar {
  background:#4e4764;
}

.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}

.nav-link {
  margin-right: 1em !important;
}

.nav-link:hover {
  color: #000;
}

.navbar-collapse {
  justify-content: flex-end;
}

img {width:100%;}

Javascript:

var img_arr = ['image_1.png','image_2.png'];

var headline_arr = ['Headline 1', 'Headline 2'];

var caption_arr = ['Caption 1', 'Caption 2'];

Answer 1

加上jQuery就可以很简单

为要渲染的 post 制作一个 space

<div id="posts">
</div>

为单个post制作模板并默认隐藏

<div style="display: none;" id="templates">
    <div id='post-template'>
        <span id='post-caption'></span>
        <span id='post-headline'></span>
        <img id='post-image' />
    </div>
</div>

遍历 JavaScript 中的对象以克隆模板并将它们附加到 post 中 div

let posts = $("#posts");
for (let i = 0; i < caption_arr.length; i++) {
    let caption = caption_arr[i];
    let headline = headline_arr[i];
    let image = img_arr[i];

    let postClone = $("#templates #post-template").clone();

    postClone.find("#post-caption").text(caption);
    postClone.find("#post-headline").text(headline);
    postClone.find("#post-image").attr('src', image);

    posts.append(postClone);
}

Answer 2

您可以使用 placeholder API 来获取虚假帖子等。

使用您的代码结构的工作示例：

let img_arr = []
let headline_arr = []
let caption_arr = []

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => {
      headline_arr = data.map(p => p.title)
      caption_arr = data.map(p => p.body)
  })


fetch("https://jsonplaceholder.typicode.com/photos")
  .then(response => response.json())
  .then(data => {
      caption_arr = data.map(p => p.thumbnailUrl)
  })

在 JS 中循环遍历数组并为 HTML 提要生成帖子 bootstrap？

Loop through array in JS and generate posts for HTML feed in bootstrap?

javascript

html

bootstrap-4

feed