Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2020, 22:08
Новичок на форуме
Отправить личное сообщение для Debroneee Посмотреть профиль Найти все сообщения от Debroneee
 
Регистрация: 01.04.2020
Сообщений: 1

Вывести товары из массива JSON по табам
Помогите с решением, пожалуйста.

Нужно из json массива вывести данные по табам в зависимости от категории и сделать общий таб где будут выводиться все товары. В каждом табе изначально должно отображаться к примеру по 4 позиции и по нажатию на кнопку loadmore должно подгружаться еще 4 нужной категории. Вот частичное решение https://codepen.io/Mr_Sergo/pen/NJaqXz
Изображения:
Тип файла: jpg question.jpg (421.2 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2020, 01:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,599

вывод товара по категориям
Debroneee,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .header{
      list-style: none;
      display: flex;
  }
  .header li{
      margin: 4px;
      padding: 4px;
  }

  .header li.active{
      background-color: #696969;
      color: #FFFFFF;
  }
  .content li{
      list-style: decimal-leading-zero;
  }
  .content li.up{
      list-style: none;
      border: 1px solid #000000;
      border-radius: 3px;
      display:  inline-block;
  }
  </style>

  <script>
var products = [
    {productId:1, productName: 'Товар 1', categoryId:1},
    {productId:2, productName: 'Товар 2', categoryId:2},
    {productId:3, productName: 'Товар 3', categoryId:3},
    {productId:4, productName: 'Товар 4', categoryId:4},
    {productId:5, productName: 'Товар 5', categoryId:5},
    {productId:6, productName: 'Товар 6', categoryId:1},
    {productId:7, productName: 'Товар 7', categoryId:2},
    {productId:8, productName: 'Товар 8', categoryId:3},
    {productId:9, productName: 'Товар 9', categoryId:4},
    {productId:10, productName: 'Товар 10', categoryId:5},
    {productId:11, productName: 'Товар 11', categoryId:1},
    {productId:12, productName: 'Товар 12', categoryId:2},
    {productId:13, productName: 'Товар 13', categoryId:3},
    {productId:14, productName: 'Товар 14', categoryId:4},
    {productId:15, productName: 'Товар 15', categoryId:5},
    {productId:16, productName: 'Товар 16', categoryId:1},
    {productId:17, productName: 'Товар 17', categoryId:2},
    {productId:18, productName: 'Товар 18', categoryId:3},
    {productId:19, productName: 'Товар 19', categoryId:4},
    {productId:20, productName: 'Товар 20', categoryId:5},
    {productId:21, productName: 'Товар 21', categoryId:1},
    {productId:22, productName: 'Товар 22', categoryId:2},
    {productId:23, productName: 'Товар 23', categoryId:3},
    {productId:24, productName: 'Товар 24', categoryId:4},
    {productId:25, productName: 'Товар 25', categoryId:5}
];

var categories = [
    {categoryId:1, categoryName: 'Футболки'},
    {categoryId:2, categoryName: 'Майки'},
    {categoryId:3, categoryName: 'Носки'},
    {categoryId:4, categoryName: 'Джинсы'},
    {categoryId:5, categoryName: 'Брюки'},
];

document.addEventListener("DOMContentLoaded", function() {
    const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
        if (target = target.closest(selector)) handler(target)
    })
    const data = {};
    const render = (id, up) => {
        let headerLi = `<li class="${id == 0 ? 'active' : ''}" data-id="0">All`;
        categories.forEach(({categoryId, categoryName}) => headerLi +=
        `<li class="${id == categoryId ? 'active' : ''}" data-id="${categoryId}">${categoryName}`);
        document.querySelector(".header").innerHTML = headerLi;
        if (!data[id]) data[id] = 4;
        if (up) data[id] += 4;
        let limit = data[id];
        let contentLi = [];
        for (const {productName, categoryId} of products)
        if (id == 0 || categoryId == id) contentLi.push(`<li>${productName}`);
        if (contentLi.length > limit) {
            contentLi.length = limit;
            contentLi.push(`<li class="up" data-id="${id}" >loadmore`);
        }
        document.querySelector(".content").innerHTML = contentLi.join('');
    }
    render(0);
    const ClickHandler = el => render(el.dataset.id, el.classList.contains("up"));
    on(document, "click", "[data-id]", ClickHandler);
});
  </script>
</head>
<body>
<ul class="header"></ul>
<ul class="content"></ul>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как с помощью JavaScript вывести некоторые данные из файла json на страницу html Lefseq Общие вопросы Javascript 3 24.07.2019 17:37
Как вывести имя объекта с максимальным значением из массива notOldFagFromRussia Общие вопросы Javascript 4 14.11.2018 14:19
Как из массива вывести на экран изображение? sendik Элементы интерфейса 1 26.02.2017 13:21
вывод данных из массива JSON Vincent Vega jQuery 19 04.03.2016 12:44
Как достать данные из JSON массива? Dimaz jQuery 15 27.11.2012 19:58