Как вывести данные из сервера в html

Question

Мне прилетают данные, которые я помещаю в переменную. Потом мне нужно вывести много одинаковых элементов карточки продукта, где должны будут подставленные эти данные.

Пример html(в {{}} данные, которые я хочу вывести):

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="homeProduct">
  <div class="card shadow-sm">
    <span class="text-center "><strong>{{clothes.name}}</strong></span>
    <a routerLink="/Clothes/Product/{{clothes.vendorCode}}"><img src="data:image/jpeg;base64,{{clothes.image}}" alt="Sad image didn't load" width="100%" height="400"></a>
    <div class="card-body">
      <p class="card-text">Цена:</p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <button routerLink="Clothes/Product/{{clothes.vendorCode}}" type="button" class="btn btn-sm btn-outline-secondary">Посмотреть</button>
        </div>
        <small class="text-muted">{{clothes.vendorCode}}</small>
      </div>
    </div>
  </div>
</div>

Я не знаю, как правильно это сделать. У меня в голове два варианта: 1. Выводить в теги или id, где заранее сделан один элемент карточки продукта в html. Но тут сразу проблема, ибо если у меня несколько объектов clothes[], которые нужно вывести несколько раз. 2. Сделать сниппет в js, который будет выводить с помощью цикла, но не могу придумать реализацию.

Пример js, который я +- криво накидал:

$(function (){
let clothes = {
    id:Number,
    vendorCode:String,
    name:String,
    image:[],
    amount:Number,
    price:Number,
    Description:String,
    size:String,
    Availability:Number
    
}
$.ajax({
    url: "https://localhost:7214/Product"
    type: "get",
    data: 'table_namе=table',
    success: function (response) {
        
        clothes = response;
   
        for(let i = 0; i < clothes.length; i++)
        {
            let col = $('#homeProduct');
            let card = col.html('<div>').addClass("card shadow-sm");
            let headerText = card.$("<span>").addClass("text-center");
            headerText.append("<strong>").append(clothes[i].name)
            
          
        }
        
    }
    
});

Как это можно сделать?

Answer 1

Можно добавить заполнение по шаблону в функции и, перебирая результат запроса в цикле, вызывать её

Пример:

function get_card(cloth) {
    let cardText = `
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id="homeProduct">
  <div class="card shadow-sm">
    <span class="text-center "><strong>${cloth.name}</strong></span>
    <a routerLink="/Clothes/Product/${cloth.vendorCode}"><img src="data:image/jpeg;base64,${cloth.image}" alt="Sad image didn't load" width="100%" height="400"></a>
    <div class="card-body">
      <p class="card-text">Цена:</p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <button routerLink="Clothes/Product/${cloth.vendorCode}" type="button" class="btn btn-sm btn-outline-secondary">Посмотреть</button>
        </div>
        <small class="text-muted">${cloth.vendorCode}</small>
      </div>
    </div>
  </div>
</div>
    `;
    return $(cardText);
}

let clothesEl = $("#clothes");
let clothes = [
    {name: "Товар 1", vendorCode: "0001", image: "-"},
    {name: "Товар 2", vendorCode: "0002", image: "-"},
    {name: "Товар 3", vendorCode: "0003", image: "-"},
    {name: "Товар 4", vendorCode: "0004", image: "-"},
];
for (let cloth of clothes) {
    clothesEl.append(get_card(cloth));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Вещи:
<div id="clothes"/>
</p>

БЛОГ НА HUSL

Как вывести данные из сервера в html

Ответы (1 шт):