Вывод данных из .xml по категориям

@Igor Donets · Регистрация: 08.06.2018

Студворк — интернет-сервис помощи студентам

Хочу по клику кнопки показывать определенные дынные.
К примеру:

HTML5
1
2
<div id="cat_1">Показываем дынные которые имеют сategory id="1"</div>
<div id="cat_2">Показываем дынные которые имеют сategory id="2"</div>

Как это реализовать?

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="UTF-8"?>
<data_base version="1" xmlns="http://xspf.org/ns/0/">
    <data_base_list>
        <сategory id="1">
            <name>Название 1</name>
            <text>Текс 1</text>
        </сategory>
        <сategory id="2">
            <cover>Тут есть обложка</cover>
            <name>Название 2</name>
            <text>Текст 2</text>
        </сategory>
    </data_base_list>
</data_base>

HTML5
1
2
3
<div class="data_base_box">
    <div class="data_base_box_ui"></div>
</div>

JavaScript
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
49
50
51
52
53
54
55
56
57
58
59
60
61
"use strict";
(function ($) {
    jQuery.fn.data_base_box = function (options) {
        options = $.extend({
            data_base: [],
        }, options);
        var make = function () {
            var $this = $(this);
            var cpl = 0;
            function box_ui(i) {
                $this.find('.data_base_box_ui .b_box').eq(cpl).removeClass('active');
                cpl = i;
                $this.find('.data_base_box_ui .b_box').eq(i).addClass('active');
            }
            box_ui(cpl);
            for (var i = 0; i < options.data_base.length; i++) {
                if(options.data_base[i].cover)
                    var covers = '<div class="cover_box"><img src="'+options.data_base[i].cover+'"></div>';
                else
                    var covers = '';
                $this.find('.data_base_box_ui').append(
                    '<div class="b_box">'
                    + covers
                    + '<div class="name_box">'+options.data_base[i].name+'</div>'
                    + '<div class="text_box">'+options.data_base[i].text+'</div>'
                    + '</div>'
                );
            }
            $this.find('.data_base_box_ui .b_box').on('click',function () {
                box_ui($(this).index('.data_base_box_ui .b_box'));
            });
        };
        return this.each(make);
    };
})(jQuery);
 
$(() => {
    $.ajax("data_base.xml", {
        dataType: 'xml',
        success: function (data_base) {
            var сategory = data_base.querySelectorAll("сategory");
            var data_base_list = Array.from(сategory, сategory => {
                return {
                    cover: text(сategory.querySelector("cover")),
                    name: text(сategory.querySelector("name")),
                    text: text(сategory.querySelector("text")),        
                };
            });
            $('.data_base_box').data_base_box({
                data_base: data_base_list
            });
 
            function text(node) {
                return node ? node.textContent : null;
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
});

@mr_dramm · 27.08.2023, 10:06

JavaScript
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
"use strict";
(function ($) {
    jQuery.fn.data_base_box = function (options) {
        options = $.extend({
            data_base: [],
        }, options);
        var make = function () {
            var $this = $(this);
            var cpl = 0;
            function box_ui(i) {
                $this.find('.data_base_box_ui .b_box').eq(cpl).removeClass('active');
                cpl = i;
                $this.find('.data_base_box_ui .b_box').eq(i).addClass('active');
            }
            box_ui(cpl);
 
            const renderDataBox = (categoryId= -1) => {
                // $this.find('.data_base_box_ui').html("") - тут нужно написать функцию которая будет стирать предыдущие добавленные данные
                const data = categoryId!==-1 ? options.data_base.filter(e => parseInt(data_base.category) === categoryId): options.data_base;
                for (var i = 0; i < data.length; i++) {
                    if(data[i].cover)
                        var covers = '<div class="cover_box"><img src="'+data[i].cover+'"></div>';
                    else
                        var covers = '';
                    $this.find('.data_base_box_ui').append(
                        '<div class="b_box">'
                        + covers
                        + '<div class="name_box">'+data[i].name+'</div>'
                        + '<div class="text_box">'+data[i].text+'</div>'
                        + '</div>'
                    );
               }
            }
            renderDataBox()
            $this.find('.data_base_box_ui .b_box').on('click',function () {
                const indx = $(this).index('.data_base_box_ui .b_box');
                box_ui(indx);
                // это вариант просто для демонстрации на самом деле сюда надо передавать id категории, а не индекс
                // но мне не известно как вы храните category.id в селекторе или фильтре
                renderDataBox(indx)
            });
        };
        return this.each(make);
    };
})(jQuery);
 
$(() => {
    $.ajax("data_base.xml", {
        dataType: 'xml',
        success: function (data_base) {
            var сategory = data_base.querySelectorAll("сategory");
            var data_base_list = Array.from(сategory, сategory => {
                return {
                    // +category
                    category: сategory.id,
                    cover: text(сategory.querySelector("cover")),
                    name: text(сategory.querySelector("name")),
                    text: text(сategory.querySelector("text")),        
                };
            });
            $('.data_base_box').data_base_box({
                data_base: data_base_list
            });
 
            function text(node) {
                return node ? node.textContent : null;
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
});

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .