Что же такое xml, и для чего мы будем делать вывод xml в html? Сейчас разберемся.
Что такое xml, и зачем я его тут рассматриваю?
XML — расширяемый язык разметки. По сути, он очень похож на html, но синтаксис у него гораздо проще. И можно создавать в нем что угодно, т.е. любые теги. Это может быть очень удобно для заказчика, чтобы заполнять простенький каталог на лендинге (не имея админки). Да и Вам, если Вы в будущем будете поддерживать сайт и наполнять каталог, будет проще сделать это через xml. Рассмотрим пример, который понадобится нам для работы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <root> <product> <main> <title>Товар 1</title> <media>./img/catalog-1.jpg</media> <price>45</price> <producer>Китай</producer> </main> <colors> <item> <image>./img/catalog-1.jpg</image> <caption>Белая</caption> <icon>./img/colors/white.png</icon> <id>i-1</id> </item> <item> <image>./img/catalog-2.jpg</image> <caption>Роза</caption> <icon>./img/colors/rose.png</icon> <id>i-2</id> </item> </colors> </product> <product> <main> <title>Товар 2</title> <media>./img/catalog-1.jpg</media> <price>45</price> <producer>Китай</producer> </main> <colors> <item> <image>./img/catalog-1.jpg</image> <caption>Белая</caption> <icon>./img/colors/white.png</icon> <id>i-1</id> </item> <item> <image>./img/catalog-2.jpg</image> <caption>Роза</caption> <icon>./img/colors/rose.png</icon> <id>i-2</id> </item> </colors> </product> </root> |
<root> <product> <main> <title>Товар 1</title> <media>./img/catalog-1.jpg</media> <price>45</price> <producer>Китай</producer> </main> <colors> <item> <image>./img/catalog-1.jpg</image> <caption>Белая</caption> <icon>./img/colors/white.png</icon> <id>i-1</id> </item> <item> <image>./img/catalog-2.jpg</image> <caption>Роза</caption> <icon>./img/colors/rose.png</icon> <id>i-2</id> </item> </colors> </product> <product> <main> <title>Товар 2</title> <media>./img/catalog-1.jpg</media> <price>45</price> <producer>Китай</producer> </main> <colors> <item> <image>./img/catalog-1.jpg</image> <caption>Белая</caption> <icon>./img/colors/white.png</icon> <id>i-1</id> </item> <item> <image>./img/catalog-2.jpg</image> <caption>Роза</caption> <icon>./img/colors/rose.png</icon> <id>i-2</id> </item> </colors> </product> </root>
В данном разметке мы видим два товара. Они имеют название, путь до их картинки, цену и т.д. А так же имеют специальные поля под цвета. Это сделано, чтобы можно было кликать на цвет и при этом менялась бы картинка.
html-разметка
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>XML to HTML</title> </head> <body> <h1>XML TO HTML Example</h1> <div class="product-grid"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="common.js"></script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>XML to HTML</title> </head> <body> <h1>XML TO HTML Example</h1> <div class="product-grid"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="common.js"></script> </body> </html>
Как все это перевести в html?
Создать запрос к файлу xml, получить данные и преобразовать. Это мы и рассмотрим ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $.get('data.xml') .done(function (data) { console.log(data) $(data) .find('product') .each(function (index, element) { console.log(element); let $product = $(element); let $grid = $('.product-grid'); let title = $product.find('title').text(), colors = $product.find('colors').find('item'), colorsString = '<div class="colors"><ul>'; $(colors).each(function (index, element) { let capt = $(element).find('caption').text(); let icon = $(element).find('icon').text(); let id = $(element).find('id').text(); let img = $(element).find('image').text(); colorsString += '<li data-img="' + img + '"><a href="#" data-id="' + id + '"><div class="icon"><img src="' + icon + '"></div><span class="op">' + capt + '</span></a></li>' }); colorsString += '</ul></div>'; $grid.append( '<div class="product-grid__item">' + '<div class="title">' + title + '</div>' + colorsString); }); }); |
$.get('data.xml') .done(function (data) { console.log(data) $(data) .find('product') .each(function (index, element) { console.log(element); let $product = $(element); let $grid = $('.product-grid'); let title = $product.find('title').text(), colors = $product.find('colors').find('item'), colorsString = '<div class="colors"><ul>'; $(colors).each(function (index, element) { let capt = $(element).find('caption').text(); let icon = $(element).find('icon').text(); let id = $(element).find('id').text(); let img = $(element).find('image').text(); colorsString += '<li data-img="' + img + '"><a href="#" data-id="' + id + '"><div class="icon"><img src="' + icon + '"></div><span class="op">' + capt + '</span></a></li>' }); colorsString += '</ul></div>'; $grid.append( '<div class="product-grid__item">' + '<div class="title">' + title + '</div>' + colorsString); }); });
Идет get-запрос к файлу с данными. Затем через each проходим по всем элементам типа product. Затем в переменные получаем нужные данные, например title.
А вот если нужно внутри each еще и цвета преобразовать — используем сложение строк и еще один each. Ну и конечно в конце используем append чтобы создать элементы в html с уже обработанными данными.
Не забывайте, что можно указывать и какие-то мета-параметры, например если какой-то товар должен быть по скидке и выглядеть чуть иначе — можно создавать в xml тег и проверять, есть ли он. Если есть — добавлять класс к нужному элементу и с его помощью менять внешний вид. Удобно)
Мини-пример можно увидеть тут: ссылка на пример
Ссылка на архив с кодом: XMLtoHTML
В сущности это все. Если у Вас будут какие-либо вопросы — задавайте, постараюсь на все ответить :) Успехов в использовании XML)
Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/
Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика :)
Не работает в FireFox 70