Вывод xml в html (xml to html) | Блог веб-разработчика MaxGraph

Вывод xml в html (xml to html)

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

Что же такое 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 class="lazy lazy-hidden" src="//blog.maxgraph.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="' + icon + '"><noscript><img src="' + icon + '"></noscript></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 class="lazy lazy-hidden" src="//blog.maxgraph.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="' + icon + '"><noscript><img src="' + icon + '"></noscript></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)

Метки: , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *