Поиск по сайту:

Как искать дерево JSON с помощью jQuery?


JSON (нотация объектов JavaScript) — это формат данных, который широко используется при передаче данных между сервером и веб-приложением. Во многих случаях данные JSON имеют сложную структуру, и поиск конкретных данных требует реализации специальной функции. jQuery, популярная библиотека JavaScript, предоставляет мощные методы для эффективной навигации и поиска в деревьях JSON с помощью методов .each(), filter() и grep. В этой статье мы рассмотрим все эти методы поиска в деревьях JSON с помощью jQuery.

Понимание деревьев JSON

Данные JSON организованы в иерархическую структуру, часто называемую деревом JSON. Он состоит из пар ключ-значение, где значения могут быть простыми типами данных (строки, числа, логические значения и т. д.) или вложенными объектами или массивами JSON. Обход этого дерева требует понимания структуры и способа идентификации и извлечения нужных данных. В приведенных ниже примерах мы будем использовать данные JSON образца каталога интернет-магазина, содержащего данные каждого продукта в каталоге, как показано ниже:

var catalog = {
    "products": [
        {
            "id": 1,
            "name": "T-shirt",
            "price": 19.99,
            "category": "Clothing",
            "color": "Blue"
        },
        {
            "id": 2,
            "name": "Smartphone",
            "price": 399.99,
            "category": "Electronics",
            "color": "Black"
        },
        {
            "id": 3,
            "name": "Book",
            "price": 9.99,
            "category": "Books",
            "color": "Red"
        }
    ]
};

Импорт jQuery

Прежде чем приступить к реализации поиска, нам необходимо включить jQuery на нашу веб-страницу. Мы можем либо загрузить библиотеку jQuery и разместить ее локально, либо включить ее из сети доставки контента (CDN). Для простоты мы будем использовать метод CDN.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>JSON Tree Search with jQuery</title>
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>
</pre>

Поиск дерева JSON с помощью jQuery

Мы можем использовать различные методы для поиска конкретных данных в дереве JSON. Используя JQuery, мы можем выполнить эту задачу, используя следующие методы:

Метод 1. Базовый поиск с использованием метода .each().

Чтобы выполнить базовый поиск, мы можем использовать функцию .each() jQuery для перебора каждого объекта или массива в дереве JSON. Например, давайте найдем все товары, цена которых превышает $15.

Синтаксис

$.each(collection, callback)

Здесь метод .each() перебирает коллекцию (например, массив или объект) и выполняет функцию обратного вызова для каждого элемента коллекции. Функция обратного вызова принимает два параметра: индекс/ключ и значение текущего итерируемого элемента.

Пример

В приведенном ниже примере функция $(document).ready() гарантирует, что код внутри нее выполняется, когда документ (HTML) полностью загружен. В функции $(document).ready() у нас есть обработчик событий для события нажатия кнопки с идентификатором showOutputBtn. При нажатии на эту кнопку функция активируется. Внутри функции обработчика события щелчка мы определяем переменную outputText для хранения выходной строки. Затем мы используем $.each() для перебора каждого объекта продукта в массивеcatalog.products. Для каждого продукта мы проверяем, превышает ли цена 15. Если да, мы добавляем имя продукта в выходной текст вместе с разрывом строки. Наконец, мы используем $('#output').html(outputText) для установки HTML-содержимого

элемент с выводом идентификатора в выходной текст. Это отобразит вывод на экране.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>JSON Tree Search with jQuery</title>
</head>
<body>
    <h1>JSON Tree Search with jQuery</h1>
    <p>Click the button to display the output:</p>
    <button id="showOutputBtn">Show Output</button>
    <p id="output"></p>

    <script>
        var catalog = {
            "products": [
                {
                    "id": 1,
                    "name": "T-shirt",
                    "price": 19.99,
                    "category": "Clothing",
                    "color": "Blue"
                },
                {
                    "id": 2,
                    "name": "Smartphone",
                    "price": 399.99,
                    "category": "Electronics",
                    "color": "Black"
                },
                {
                    "id": 3,
                    "name": "Book",
                    "price": 9.99,
                    "category": "Books",
                    "color": "Red"
                }
            ]
        };

        $(document).ready(function() {
            $('#showOutputBtn').click(function() {
                var outputText = '';
                $.each(catalog.products, function(index, product) {
                    if (product.price > 15) {
                        outputText += product.name + '<br>';
                    }
                });
                $('#output').html(outputText);
            });
        });
    </script>
</body>
</html>

Выход

Метод 2: Фильтрация по свойству с использованием метода filter и grep.

Для поиска определенных значений внутри свойства мы можем использовать метод jQuery .filter(). Например, найдем в дереве данных JSON все продукты, относящиеся к категории «Электроника».

Синтаксис

$.grep(array, callback)

Здесь метод .grep() фильтрует массив на основе предоставленной функции обратного вызова. Он создает новый массив, содержащий только те элементы, которые соответствуют условию, указанному в обратном вызове. Функция обратного вызова должна возвращать true, чтобы включить элемент в фильтруемый массив, или false, чтобы исключить его.

Пример

В приведенном ниже примере мы настроили обработчик событий клика для кнопки с идентификатором filterByPropertyBtn. При нажатии кнопки происходит фильтрация массиваcatalog.products на основе свойства категории, выбирая только те продукты, которые имеют значение категории «Одежда». Затем он перебирает отфильтрованные продукты и добавляет их имена в переменную outputText, разделяя их разрывами строк. Наконец, он устанавливает HTML-содержимое элемента с идентификатором filterByPropertyOutput в выходной текст, отображая на экране отфильтрованные названия продуктов.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>JSON Tree Search with jQuery</title>
</head>
<body>
    <h1>JSON Tree Search with jQuery</h1>
    <p>Filter by Property:</p>
    <button id="filterByPropertyBtn">Filter by Property</button>
    <p id="filterByPropertyOutput"></p>

    <script>
        var catalog = {
            "products": [
                {
                    "id": 1,
                    "name": "T-shirt",
                    "price": 19.99,
                    "category": "Clothing",
                    "color": "Blue"
                },
                {
                    "id": 2,
                    "name": "Smartphone",
                    "price": 399.99,
                    "category": "Electronics",
                    "color": "Black"
                },
                {
                    "id": 3,
                    "name": "Book",
                    "price": 9.99,
                    "category": "Books",
                    "color": "Red"
                }
            ]
        };

        $(document).ready(function() {
            $('#filterByPropertyBtn').click(function() {
                var filteredProducts = $.grep(catalog.products, function(product) {
                    return product.category === "Clothing";
                });

                var outputText = '';
                $.each(filteredProducts, function(index, product) {
                    outputText += product.name + '<br>';
                });
                $('#filterByPropertyOutput').html(outputText);
            });

        });
    </script>
</body>
</html>

Выход

Метод 3. Использование метода Deep Tree Traversal и .find().

Иногда нам нужно искать определенные значения во вложенных структурах JSON. В таких случаях мы можем использовать рекурсивные подходы или использовать метод jQuery .find(). Например, давайте найдем все продукты синего или красного цвета.

Синтаксис

$(selector).find(filter)

Здесь метод .find() используется для поиска элементов-потомков внутри выбранного элемента(ов) на основе фильтра. Он возвращает новый объект jQuery, содержащий совпадающие элементы. Параметр селектора представляет родительский элемент(ы), а параметр фильтра указывает элементы, которые нужно найти в родительском элементе(ах).

Пример

В приведенном ниже примере мы определяем рекурсивную функцию findMatchingProducts, которая обходит дерево JSON и проверяет нужные значения свойств. Если свойство цвета соответствует «Синему» или «Красному», продукт добавляется в массив matchProducts.

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>JSON Tree Search with jQuery</title>
</head>
<body>
    <h1>JSON Tree Search with jQuery</h1>

    <p>Deep Tree Traversal:</p>
    <button id="deepTraversalBtn">Deep Tree Traversal</button>
    <p id="deepTraversalOutput"></p>

    <script>
        var catalog = {
            "products": [
                {
                    "id": 1,
                    "name": "T-shirt",
                    "price": 19.99,
                    "category": "Clothing",
                    "color": "Blue"
                },
                {
                    "id": 2,
                    "name": "Smartphone",
                    "price": 399.99,
                    "category": "Electronics",
                    "color": "Black"
                },
                {
                    "id": 3,
                    "name": "Book",
                    "price": 9.99,
                    "category": "Books",
                    "color": "Red"
                }
            ]
        };

            $('#deepTraversalBtn').click(function() {
                var matchingProducts = [];

                function findMatchingProducts(data) {
                    $.each(data, function(key, value) {
                        if (key === "color" && (value === "Blue" || value === "Red")) {
                            matchingProducts.push(data);
                        } else if (typeof value === "object") {
                            findMatchingProducts(value);
                        }
                    });
                }

                findMatchingProducts(catalog);

                var outputText = '';
                $.each(matchingProducts, function(index, product) {
                    outputText += product.name + '<br>';
                });
                $('#deepTraversalOutput').html(outputText);
            });
    </script>
</body>
</html>

Выход

Заключение

В этой статье мы обсудили, как можно выполнять поиск в дереве JSON с помощью мощных методов и селекторов jQuery. Используя методы, описанные в этой статье, вы можете эффективно искать и извлекать определенные данные из сложных структур JSON. Интуитивный синтаксис jQuery и его широкое распространение делают его отличным выбором для обработки и обхода JSON. В этой статье мы обсудили, как можно выполнять поиск в дереве JSON с помощью мощных методов и селекторов jQuery. Используя методы, описанные в этой статье, вы можете эффективно искать и извлекать определенные данные из сложных структур JSON. Интуитивный синтаксис jQuery и его широкое распространение делают его отличным выбором для обработки и обхода JSON.

Статьи по данной тематике: