在模板文字 JS 中循环

Question

我有这样的对象。

{image: "img", images: "["1561971738beach-2179624_960_720.jpg","1561971738…"1561971738photo-1507525428034-b723cf961d3e.jpg"]", name: "aaa", surname: "bbb", text: "test", …}
image: "img"
images: "["1561971738beach-2179624_960_720.jpg","1561971738pexels-photo-457882.jpeg","1561971738photo-1507525428034-b723cf961d3e.jpg"]"
name: "aaa"
surname: "bbb"
text: "test"
user_id: 2

图像字段包含 JSON 张图片，每个 post 都有。如何在打印 post 时将每个 post 的图像放入其中？

我的代码：

$.ajax({
    url: '/loadPosts',
    type: 'GET',
    dataType: 'json',
    data: {_token: "{{ csrf_token() }}"},
    success: function(r){

        r.forEach((post)=>{

            var images = JSON.parse(post.images);

                $('.posts-div').append(` 

                    <div class="card mb-3">
                      <h5 class="card-header">
                      <img src="images/${post.image}" style="width: 35px; height: 35px;">
                      ${post.name} ${post.surname}
                      </h5>
                      <div class="card-body">
                        <p class="card-text">${post.text}</p>


                        NEED TO PUT IMAGES HERE.


                        <div class="heart-div">
                            <img class="heart" src="http://www.clipartroo.com/images/96/black-heart-clipart-96717.png">
                        </div>
                      </div>
                    </div>
                `);
        })
    }
})

Answer 1

您迭代 post 图像数组，如下所示：

创建可变字符串。
将内容存储到图像所在的位置。
我们迭代图像，并将其存储在字符串中。
我们将底部 html 添加到字符串中。

最后用 append() 附加它。

$.ajax({
    url: '/loadPosts',
    type: 'GET',
    dataType: 'json',
    data: {_token: "{{ csrf_token() }}"},
    success: function(r){

    r.forEach((post)=>{

        var string = `<div class="card mb-3">
                 <h5 class="card-header">
                 <img src="images/${post.image}" style="width: 35px; height: 35px;">
                 ${post.name} ${post.surname}
                 </h5>
                 <div class="card-body">
                   <p class="card-text">${post.text}</p>`;
       for(image in post.images){
         var string = string + `<img src="images/${image}" style="width: 35px; height: 35px;">`;
       }                   
       var string = string + `<div class="heart-div">
                        <img class="heart" src="http://www.clipartroo.com/images/96/black-heart-clipart-96717.png">
                    </div>
                  </div>
                </div>`;
       $('.posts-div').append(string);
    })
} })

这是整个 ajax 调用，只是复制粘贴，我没有 "compile" 所以可能有一些语法错误，但逻辑是完美的，所以请告诉我它是如何工作的。

在模板文字 JS 中循环

Loop inside template literals JS

javascript

jquery

template-literals