<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Выгрузка товаров на сайт (jQuery + JSON)

Выгрузка товаров на сайт (jQuery + JSON)

На этом уроке мы сделаем выгрузку товара из JSON файла на HTML страницу. Для быстрого написания JSкода, воспользуемся уже подзабытой библиотекой jQuery.

Библиотека jQuery сама по себе не является целью данного урока, а лишь средством. За счет упрощенного синтаксиса, будет проще отследить сам принцип выгрузки товаров в условный интернет-магазин из JSON файла. В JSON файле содержится описание товаров. Этот файл является промежуточным между стороной клиента (браузера) и стороной сервера.

JSON файл с товарами

Как правило идентификатором товара служит уникальный артикул товара. Все остальные поля данной мини базы данных интуитивно понятны и не требуют расшифровки. Что предстоит сделать? Нужно вывести данные из всех четырех полей каждого товара, включая картинки.

{
    "12345" : { // уникальный ID товара
        "name" : "Колокольчик",
        "cost" : 5,
        "description" : "Рождественский колокольчик",
        "image" : "images/bell.png"
    },
    "23456" : {
        "name" : "Шапка",
        "cost" : 12,
        "description" : "Шапка Санты Клауса",
        "image" : "images/hat.png"
    },
    "34567" : {
        "name" : "Подарки",
        "cost" : 20,
        "description" : "Рождественские подарки",
        "image" : "images/presents.png"
    }
}

HTML код

На HTML страницу будут выводится наши товары, как в обычном интернет-магазине.

<div id="items">
// здесь будут товары </div>

JS код

Писать наш код мы будем в JavaScript файле, используя сам язык JavaScript + готовые методы из библиотеки jQuery, предварительно подключив ее к HTML странице.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Поместим функцию loadItems() в стандартную обертку, которая проверяет загрузился ли HTML-документ, прежде чем разрешить работу скрипта.

$('document').ready(function(){
    loadItems();
});

После загрузки HTML страницы, можно приступить к выгрузке товаров на данную HTML страницу из файла items.json. Функция loadItems() будет выгружать товары на страницу.

function loadItems() {
//загрузка товаров на страницу
}

У jQuery имеется на этот случай метод getJSON(), в параметрах которого передается имя JSON файла и функция-обработчик данного файла. Все данные из JSON файла в виде объекта попадают в переменную data для дальнейших манипуляций.

$.getJSON('items.json', function (data)

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

let out = '';

Мы перебираем этот объект в цикле for in. В переменную key попадает артикул товара и мы получаем доступ к данному объекту. При втором прохождении цикла получаем доступ к следующему объекту и так происходит до тех пор, пока не закончится товар. Теперь добавим в пустую строку out HTML теги объединенные с ключами выводимых объектов.

for (let key in data){
    out+='<h3>'+data[key]['name']+'</h3>';
    out+='<p>Цена: '+data[key]['cost']+'</p>';
    out+='<img src="'+data[key].image+'">'; // Формируем URL картинки
}

После перебора циклом, выводим данные на страницу.

$('#items').html(out);

Чтобы все красиво смотрелось на странице, зададим CSS стили и выведем теги с классами, в том числе и кнопку.

Окончательный JavaScript код:

$('document').ready(function(){
    loadItems();
});

function loadItems() {
  $.getJSON('items.json', function (data) {
    console.log(data);
      let out = '';
      for (let key in data){
        out+='<div class="single-items">';
        out+='<h3>'+data[key]['name']+'</h3>';
        out+='<p>Цена: '+data[key]['cost']+'</p>';
        out+='<img src="'+data[key].image+'">';         out+='<button>Купить</button>';
        out+='</div>';
    }
  $('#items').html(out);
})
}

Вот, что получилось в результате.


Выгрузка товаров на сайт (jQuery + JSON).

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.