Цикл внутри литералов шаблона JS - PullRequest
Новая
       15

Цикл внутри литералов шаблона JS

0 голосов
/ 01 июля 2019

У меня есть такие объекты. 

{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 изображений, которые есть в каждом сообщении.Как я могу поместить изображения каждого поста в него при печати поста?

Мой код: 

$.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>
                `);
        })
    }
})

1 Ответ

0 голосов
/ 01 июля 2019

Вы выполняете поиск по массиву изображений, например:

  1. Создать переменную строку.
  2. Храните содержимое до того места, где находятся изображения.
  3. Мы повторяем изображения и сохраняем их в строку.
  4. Мы добавляем нижний html в строку.

  5. Наконец, вы добавляете его с помощью 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, просто скопируйте и вставьте, я не «компилировал» его, так что, возможно, есть какая-то синтаксическая ошибка, но логика безупречна, поэтому скажите мне, как она работает.

...