<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

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

Подписавшись по 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):

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