Можно ли сократить этот код?

Question

[TtT RrR]

Функция loadCakes показывает товары в таком количестве, которое ему указывается числом. Если его нет, то показываются все товары в json'е.
Можно ли сократить этот код в один цикл for?

$(function () {
  loadItems();
});
function loadItems() {
  $.getJSON('database/products.json', function (data) {
    function loadCakes(num) {
      let out = '';
      if (!num) {
        for (let key in data) {
          out += '<a data-num="' + data[key].id + '" data-category="' + data[key]['category'] + '" class="products__card card">';
          out += '<div class="card__image image">';
          out += '<img src="' + data[key].image + '" alt="' + data[key]['image'] + '">';
          out += '</div>';
          out += '<h3 class="card__title title">' + data[key]['name'] + '</h3>';
          out += '<p class="card__desc">' + data[key]['description'] + '</p>';
          out += '<div class="card__bottom">';
          out += '<p class="card__price">' + data[key].price + ' р.</p>';
          out += '<button class="card__buy">';
          out += '<img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">';
          out += '</button>';
          out += '</div>';
          out += '</a>';
        }
      } else {
        for (let i = 1; i <= num; i++) {
          out += '<a data-num="' + data[i].id + '" data-category="' + data[i]['category'] + '" class="products__card card">';
          out += '<div class="card__image image">';
          out += '<img src="' + data[i].image + '" alt="' + data[i]['image'] + '">';
          out += '</div>';
          out += '<h3 class="card__title title">' + data[i]['name'] + '</h3>';
          out += '<p class="card__desc">' + data[i]['description'] + '</p>';
          out += '<div class="card__bottom">';
          out += '<p class="card__price">' + data[i].price + ' р.</p>';
          out += '<button class="card__buy">';
          out += '<img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">';
          out += '</button>';
          out += '</div>';
          out += '</a>';
        }
      }
      return out;
    }
    $('#cakes-cards').html(loadCakes());
    $('#index-cards').html(loadCakes(6));
  })
}

Comments

[Антон]

На первый взгляд что-то типа такогоlet maxIndex = num? num : data.length;
и оставить один цикл.
for (let i = 0; i < maxIndex; i++) {
Т.е. вы определяете до какого индекса итерироваться - либо до num, либо по всему массиву.
Кстати, что будет, если указать num больше, чем всего элементов в массиве?

[Alex]

Можно сделать out = ``
а данные потом вставить один раз между` <a data-num=${data[i].id}` через строковую интерполяцию

[TtT RrR]

Alex, знаю про такое. Спасибо

[TtT RrR]

Кстати, что будет, если указать num больше, чем всего элементов в массиве?

Антон, об этом я не думал. Надо доработать

Answer 1

[Сергей delphinpro]

function render(arr) {
    return `<a data-num="${arr.id}" data-category="${arr.category}" class="products__card card">
                <div class="card__image image">
                    <img src="${arr.image}" alt="${arr.image}">
                </div>
                <h3 class="card__title title">${arr.name}</h3>
                <p class="card__desc">${arr.description}</p>
                <div class="card__bottom">
                    <p class="card__price">${arr.price} р.</p>
                    <button class="card__buy">
                        <img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">
                    </button>
                </div>
            </a>`;
}

function loadCakes(data, count = null) {
    return data
        .slice(0, count ?? data.length)
        .reduce((carry, item) => carry + render(item), '');
}

function loadItems() {
    $.getJSON('database/products.json', function (data) {
        $('#cakes-cards').html(loadCakes(data));
        $('#index-cards').html(loadCakes(data, 6));
    });
}

Comments

[TtT RrR]

а если получаемое число больше длины json, то вместо числа передать длину?

[Сергей delphinpro]

TtT RrR, Если в slice вторым параметром передать число, превышающее длину массива, то срез будет по всей длине массива. Тут не нужны лишние проверки.

Answer 2

[teenager_python]

$(function() {
loadItems();
});

function loadItems() {
$.getJSON('database/products.json', function(data) {
function loadCakes(num) {
let out = '';
for (let i = 0; i < (num || data.length); i++) {
out += '<a data-num="' + data[i].id + '" data-category="' + data[i]['category'] + '" class="products__card card">';
out += '<div class="card__image image">';
out += '<img src="' + data[i].image + '" alt="' + data[i]['image'] + '">';
out += '</div>';
out += '<h3 class="card__title title">' + data[i]['name'] + '</h3>';
out += '<p class="card__desc">' + data[i]['description'] + '</p>';
out += '<div class="card__bottom">';
out += '<p class="card__price">' + data[i].price + ' р.</p>';
out += '<button class="card__buy">';
out += '<img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">';
out += '</button>';
out += '</div>';
out += '</a>';
}
return out;
}
$('#cakes-cards').html(loadCakes());
$('#index-cards').html(loadCakes(6));
})
}

Код был упрощен с помощью цикла for. Теперь функция loadCakes обрабатывает только один случай, в зависимости от переданного параметра num. Если num равен 0 или не был передан, то в цикле обрабатываются все элементы из базы данных. Если num больше 0, то обрабатываются только num элементов. После этого, результат выводится на страницу в нужные элементы.

Comments

[Владимир Проскурин]

Я может параноик, и надеюсь это не прозвучит обидно, но у меня ощущение, будто этот ответ был скопирован с ChatGPT :). Слишком уж похож стиль написания вывода.

[TtT RrR]

а если передаётся число по переменной num, то оно сможет передаться в коде? просто в out везде строится через data

[Сергей delphinpro]

Владимир Проскурин, да нет. Нейросетка умнее, должна была учесть возможный выход индекса за пределы.