0

Не могу догадаться, как всавить данные из массива JSON в каждый див.

Данные представляют собой массив вида

Нужно вставить в от в такой див коих 9 штук.

<div class="col-xs-12 col-md-4">
            <div class="thumbnail">
                <img class='nextprod'  src="" alt="">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p></p>
                </div>
            </div>
</div>

Вот код которым я это пытаюсь сделать, но так ничего не вставляется.

if (data.contents) {

                let prod='';
                let ctn2 = data.contents.length;
                for(var ix=0; ix<ctn2; ix++) {
                    var countSrck=data.contents[1][ix]['src'].length;
                    var countAlter=data.contents[1][ix]['alternate'].length;
                       for(var isrk=0; isrk<countSrck; isrk++){
                          var srck=data.contents[1][ix]['src'][isrk];
                       for(var ialter=0; ialter<countAlter;ialter++){
                           var alter=data.contents[1][ix]['alternate'][ialter];
                           $('img.nextprod').attr({'src':srck,'alt':alter});
                       }
                       }
                   $('div.caption p').append(data.contents[1][ix]['small_text']);

                }

            }

Как вставить в каждый див свой контент? И как это сделать более грамотно?

2 ответа 2

0

var $wrapper = $('#wrapper'),
    myObj = {
        "0":{ "name":"Ford", 
              "models":"Fiesta",
              "price":"10000",
              "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Пистолет_Макарова.png/300px-Пистолет_Макарова.png"
        },
        "1":{ "name":"BMW", 
              "models":"X5",
              "price":"10000",
              "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Пистолет_Макарова.png/300px-Пистолет_Макарова.png"
        },
        "2":{ "name":"Fiat",
              "models":"Panda",
              "price":"10000",
              "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Пистолет_Макарова.png/300px-Пистолет_Макарова.png"
       }
    };
 
for (i in myObj) {
    $wrapper.append('<div class="some-class"><p>' + myObj[i].name + '</p>' +
    '<p>' + myObj[i].models + '</p>' +
    '<p>' + myObj[i].price + '</p>' +
    '<img src="' + myObj[i].image + '" /></div>');
}
 
 
.some-class{
    border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>

2
  • Привет а можешь подсказать как отключить кеширование js скриптов в гугл браузере. А то я тут нашёл ctr+F5, Disable cache. Но все равно подкеширует. И только что измененный файл остается неизмененным. Ну и как его нормально продебажить в PHP storm&
    – dpi
    28 дек 2017 в 18:15
  • @dpi скорее всего кеширует хостинг, а ctrl+f5 100% сносит текущие кеши сайта
    – Kirill
    28 дек 2017 в 19:11
0
if (data.contents) {
  let $divThumbs = $(".thumbnail");
  let ctn2 = Math.min(data.contents.length, $divThumbs.length);
  for (var ix = 0; ix < ctn2; ix++) {
    let $divThumb = $($divThumbs[ix]);
    $divThumb.empty();

    let countSrck = data.contents[ix]['src'].length;
    let countAlter = data.contents[ix]['alternate'].length;
    for(var isrk = 0; isrk < Math.min(countSrck, countAlter); isrk++) {
      let srck = data.contents[ix].src[isrk];
      let alter = data.contents[ix].alternate[isrk];
      let $img = $("<img class='nextprod'/>");
      $img.attr({'src': srck, 'alt':alter});
      $divThumb.append($img);
    }
    let $divCaption = $("<div class="caption"><h3>Thumbnail label</h3><p></p></div>");
    $divCaption.find("p").text(data.contents[ix].small_text);
    $divThumb.append($divCaption);
  }
}
1
  • чет не работает( P.S. данные все время приходят. А вот вставка не работает.
    – dpi
    28 дек 2017 в 16:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.