генерировать отдельные HTML на основе одного результата JSON

Question

пожалуйста, посмотрите ниже HTML

<div id="sidebar">
<div id="box1"></div>

<div class="ads"></div>

<div id="box2"></div>

<div class="ads"></div>

<div id="box3"></div>

</div>

как видите, есть несколько ящиков и между каждыми двумя полями есть div с объявлениями класса

Мне нужно заполнить эти объявления списком изображений

Я возвращаю список изображений в формате json, используя приведенное ниже действие

[HttpPost]
    public JsonResult LoadAds()
    {
        var adsList = Advertise.GetAdvertise().Select(a => new
        {
            Id = a.Id,
            img = a.img                           
        });
        return Json(adsList, JsonRequestBehavior.AllowGet);
    }

это мой код ajax

$(document).ready(function () {
function showAds() {              
                var url = '/Home/LoadAds';
                $.ajax({
                    type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    url: url,
                    success: function (response) {

                          $.each(response, function (index, item) {
                                var htmlcontnet = "";
                                //Need to populate adds here
                            });
                        }
                    },
                    failure: function (msg) {

                    }
                });
            }
        });

как я могу генерировать правильный html в функции успеха?

Answer 1

Будет лучше создать альтернативный div динамически, так как вы можете добавить любое количество рекламных изображений в зависимости от доступности

$(function(){
  showAds();
});

function showAds() {
  var url = '/Home/LoadAds';
  
  // uncomment this line with your orginal url
  //$.get(url, function(response) {
  
  //remove this hardcoded json response
  var response = [{
    Id: 1,
    img: 'https://image.flaticon.com/icons/png/128/1078/1078005.png'
  }, {
    Id: 2,
    img: 'https://image.flaticon.com/icons/png/128/1078/1078006.png'
  }];
  var imgIndx = 0;
  $(".box").each(function() {
    if (response.length > imgIndx) {
      $(this).after($('<div class="ads"><img src="' + response[imgIndx].img + '" /></div>'));
    }
    imgIndx++;

  });
  //});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

Учитывая, что это ваш json response = {0:"This is Add 1", 1:"This is Add 2"}

Ваш обработчик кода должен быть примерно таким.

$.each(response, function (index, item) {
  var htmlcontnet = "";
  $('.ads').eq(index).html(item);
});