Loop inside template literals JS

user_10876255 0
Viewed 2932

I have objects like these.

{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

The images field contains JSON of pictures each post has. How can I put each post's images inside of it while printing the post out?

My code:

$.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>
                `);
        })
    }
})
template-literals jquery javascript
1 Answers

You iterate trought the post images array, like this:

  1. Create a variable string.
  2. Store the content until the place where the images are.
  3. We iterate the images, and store it in string.
  4. We add the bottom html to the string.

  5. Finally you append it with 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);
    })
} })

Here is the entire ajax call, just copy paste, I did not "compile" it so maybe there are some syntax error, but the logic is flawless, so tell me how it works.

user_97245510
Related