如何使用api在html div中獲取圖像

Question

我在html上附加了一個圖片和標題，但對所有元素都重復了。 我只需要每個圖像和標題。

html

<div class="row">
    <div class="col-md-3 text-center get-img" >
      <div class="get-title"></div>
      <p class="text-center"></p>
    </div>
    <div class="col-md-3 text-center get-img">
      <div class="get-title"></div>
      <p class="text-center ">  </p>
    </div>
    <div class="col-md-3 text-center get-img">
      <div class="get-title"></div>
      <p class="text-center">  </p>
    </div>
    <div class="col-md-3 text-center get-img">
      <div class="get-title"></div>
      <p class="text-center"> </p>
    </div>
  </div>

javascript

$(document).ready(function(){
    $.getJSON("https://startupet.com/blog/wp-json/wp/v2/posts? 
    _embed", function(data) {
    console.log(data)
    var pic= '';
    var string = '';
    data.slice(-4).forEach(function(item) {
      pic += `<img src= ${item._embedded["wp:featuredmedia"] 
     [0].source_url}  class="img-fluid img-course"/>`
      string += `<h5 class="text-center m-t-10 b- 
      color">${item.title.rendered}</h5>`

    })
    $(".get-img").append(pic)
    $(".get-title").append(string)
  })
});

///////////////////////////////////////////////////// ///////////

Answer 1

嘗試這種方式

$(document).ready(function () {
            var html = '';

            $.getJSON("https://startupet.com/blog/wp-json/wp/v2/posts?_embed", function (data) {
                console.log(data)

                data.slice(-4).forEach(function (item) {

                    html += ` <div class="col-md-3 text-center get-img">
                        <img src= ${item._embedded["wp:featuredmedia"]
                        [0].source_url}  class="img-fluid img-course"/>
                        <div class="get-title">
                        <h5 class="text-center m-t-10 b-color">${item.title.rendered}</h5></div>
                        <p class="text-center"></p>
                        </div>`
                })
                $(".row").append(html)
            })
        });

的HTML

<div class="row">


    </div>