document.querySelectorAll('.value-item').forEach(
(el) => el.addEventListener(
'click',
(e) => {
document.querySelector('.value-item.value-active')?.classList.remove('value-active', 'basic__shadow');
e.target.classList.add('value-active', 'basic__shadow');
},
),
);CREATE TABLE `test` (
`id` INT,
`title` VARCHAR(32),
`parent_id` INT
);
INSERT INTO `test` VALUES
(1, 'Category 1', NULL),
(2, 'SubCategory 1.1', 1),
(3, 'SubCategory 1.2', 1),
(4, 'SubSubCategory 1.1.1', 2),
(5, 'Category 2', NULL);
WITH RECURSIVE `cte` AS (
SELECT `id`, JSON_OBJECT('id', `id`, 'title', `title`) AS `json`
FROM `test`
WHERE `parent_id` IS NULL
UNION
SELECT `t`.`id`, JSON_OBJECT('id', `t`.`id`, 'title', `t`.`title`, 'category', `c`.`json`) AS `json`
FROM `test` AS `t`
JOIN `cte` AS `c` ON `t`.`parent_id` = `c`.`id`
)
SELECT *
FROM `cte`;
| id | json |
| --- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| 1 | {"id": 1, "title": "Category 1"} |
| 5 | {"id": 5, "title": "Category 2"} |
| 2 | {"id": 2, "title": "SubCategory 1.1", "category": {"id": 1, "title": "Category 1"}} |
| 3 | {"id": 3, "title": "SubCategory 1.2", "category": {"id": 1, "title": "Category 1"}} |
| 4 | {"id": 4, "title": "SubSubCategory 1.1.1", "category": {"id": 2, "title": "SubCategory 1.1", "category": {"id": 1, "title": "Category 1"}}} |