Многоуровневое меню JavaScript

@Popryduhin_ · Регистрация: 29.01.2019

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

Добрый вечер Уважаемые коллеги!

Помогите осилить, кто силён в JavaScript.

В браузер приходят следующие данные

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        }
    ]
}

Нужен следующий вариант, после преобразования

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория > Дочерняя категория"
        }
    ]
}

Задача тривиальная для настоящего профессионала JavaScript

Желательно не создавая нового экземпляра, так как это экземпляр "DataTable"

вот отрывок

JavaScript
1
2
3
4
5
6
7
8
9
...
}).on('xhr.dt', function (e, settings, json, xhr) {
 
// json.data <- массив
// здесь нужно произвести преобразование 
 
           
 
        });

Спасибо!

Qwerty_Wasd · 29.01.2019, 23:21

Popryduhin_, в каком конкретно виде поступает JSON?
Вот так ? Это весь?

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        }
    ]
}

Или это один из элементов массива такого вида?

JSON
1
2
3
4
5
6
7
8
9
[
 {
   ... 
  },{
   .....
  },{
   ......
  }....
]

@Popryduhin_ · 29.01.2019, 23:25 **[ТС]**

Qwerty_Wasd, в виде объекта

@Popryduhin_ · 29.01.2019, 23:29 **[ТС]**

Задача состоит в том, что не нужно строить дерево, нужно псевдо дерево.

Корневая категория
Корневая категория -> Дочерняя

Добавлено через 1 минуту
Как в OpenCart

@Popryduhin_ · 29.01.2019, 23:35 **[ТС]**

Сообщение от Qwerty_Wasd

Или это один из элементов массива такого вида?

Это ответ сервера как есть.

Добавлено через 3 минуты
Вот серверная часть, для полного представления.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
     * @api
     */
    public function getAll()
    {
        $draw = $this->request->request('draw', 0);
        $start = $this->request->request('start', 0);
        $length = $this->request->request('length', 10);
        $search = $this->request->request('search', false);
        $columns = $this->request->request('columns', []);
        $lang = $this->request->request('lang', 'ru');
 
        $obj = new \stdClass();
        $obj->recordsTotal = $this->category->count();
        $obj->recordsFiltered = $this->category->count();
        $obj->data = $this->category->getAll($start, $length, $lang);
 
        
        header('Content-type: application/json; charset=utf-8');
        echo json_encode($obj, JSON_UNESCAPED_UNICODE);
    }

Qwerty_Wasd · 29.01.2019, 23:43

Popryduhin_, там дальше я вижу продолжение "Третий уровень".
Должно получиться так?

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
{
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        },
        {
            "id": "3",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория > Дочерняя категория > Третий уровень"
        }
        ........// далее видимо будет "Корневая категория > Дочерняя категория > Третий уровень > Четвертый уровень" ?
    ]
}

Я это спрашиваю потому, что от кол-ва элементов массива дата - зависит уровень вложенности?
Вы как расплывчато проблему обрисовали.
Просто если следовать Вашему ТЗ в п.1, то это одна строка кода -

JavaScript
1
 json.data[1].category = `Корневая категория > Дочерняя категория`

Согласитесь, выглядит странно ))

Добавлено через 2 минуты
Нужно Понять сколько уровней вложенности и видеть поля при этом, за которые можно будет зацепиться при обращении к элементам.

Добавлено через 2 минуты
Если JSON огромен, что сюда не помещается под кат, то нужен кусок, что демонстрирует вложенность и соотвествующие поля id.

@Popryduhin_ · 29.01.2019, 23:49 **[ТС]**

Хмм.

Уровень вложений бесконечный.

Вот так приходит клиенту

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
{
    "recordsTotal": 3,
    "recordsFiltered": 3,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        },
        {
            "id": "3",
            "parent_id": "2",
            "target": "_self",
            "icon": null,
            "category": "Третий уровень"
        }
    ]
}

После преобразования нужно иметь следующий вид

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
{
    "recordsTotal": 3,
    "recordsFiltered": 3,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория -> Дочерняя категория"
        },
        {
            "id": "3",
            "parent_id": "2",
            "target": "_self",
            "icon": null,
            "category": "Корневая категория -> Дочерняя категория -> Третий уровень"
        }
    ]
}

Ключи:

id и parent_id

Добавлено через 5 минут
Я создавал как то топик по этой же теме.

Вот решение, которое помогло мне в прошлом, оно устарело по многим причинам.

@Popryduhin_ · 29.01.2019, 23:53 **[ТС]**

Qwerty_Wasd · 29.01.2019, 23:57

Popryduhin_, если конечно еще сюрпризов нет, то - https://codepen.io/qwerty_wasd/pen/mvrgOR

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
let aJSON = {
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        },
        {
            "id": "3",
            "parent_id": "2",
            "target": "_self",
            "icon": "",
            "category": "Третий уровень"
        }
    ]
};
 
aJSON.data.forEach((e, i, a) => {
  if (i > 0) {
    e.category = `${a.find( el => el.id === String(i)).category} > ${e.category}`;
  }
});
 
console.log(aJSON);

@Popryduhin_ · 29.01.2019, 23:59 **[ТС]**

Qwerty_Wasd, Браво!!!!
Фантастика!

Qwerty_Wasd · 30.01.2019, 00:03

Popryduhin_, хорошо, раз сюрпризов нет - пользуйтесь на здоровье

@Popryduhin_ · 30.01.2019, 00:05 **[ТС]**

Не как не могу понять как работает функция find )))

и в целом эта конструкция e.category = `${a.find( el => el.id === String(i)).category} > ${e.category}`;

@Popryduhin_ · 30.01.2019, 00:08 **[ТС]**

Qwerty_Wasd, Я отрываюсь теперь

@Popryduhin_ · 30.01.2019, 00:10 **[ТС]**

Радуюсь как ребёнок ))

Qwerty_Wasd · 30.01.2019, 00:14

Popryduhin_,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
// Array.prototype имеет метод forEach как замена стандартному циклу, он меняет исходный массив, не создавая новый.
//  его синтаксис можно посмотреть в документации
// для каждого элемента я меняю значение поля category, используя шаблон(Template literals)
//  конструкция ${}  в шаблоне позволяет обратиться к statement или использовать expressions
// что я и сделал
// метод find находит в массиве совпадение по условию в колбеке
// Всё что находится  вне ${} - строка
// Всё что находится в ${} - будет представлено в строковом виде после вычисления
aJSON.data.forEach((elem_arr, index, arr_aJSON) => {
  if (i > 0) {
    elem_arr.category = `${arra_JSON.find( el => el.id === String(index)).category} > ${elem_arr.category}`;
  }
});

Добавлено через 38 секунд
Popryduhin_,

Сообщение от Popryduhin_

Радуюсь как ребёнок ))

хахаххаха)))) Хорошо

@Popryduhin_ · 30.01.2019, 05:14 **[ТС]**

Qwerty_Wasd, Конструкция дала трещину ((( ��

Водка должна быть в "Ещё один грёбаный уровень"
По факту водка в "На ещё"

Вот полный ответ сервера.

JSON
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
{
    "recordsTotal": 6,
    "recordsFiltered": 6,
    "data": [
        {
            "id": "1",
            "parent_id": "0",
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": "2",
            "parent_id": "1",
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        },
        {
            "id": "3",
            "parent_id": "2",
            "target": "_self",
            "icon": null,
            "category": "Третий уровень"
        },
        {
            "id": "4",
            "parent_id": "3",
            "target": "_self",
            "icon": null,
            "category": "Ещё один грёбаный уровень"
        },
        {
            "id": "5",
            "parent_id": "3",
            "target": "_self",
            "icon": null,
            "category": "На ещё"
        },
        {
            "id": "61",
            "parent_id": "4",
            "target": "_self",
            "icon": null,
            "category": "Водка"
        }
    ]
}

@Popryduhin_ · 30.01.2019, 05:29 **[ТС]**

Слегка преобразовал типы id и parent_id теперь они имеют целый тип, может поможет чем (

Кликните здесь для просмотра всего текста

JSON
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
{
    "recordsTotal": 6,
    "recordsFiltered": 6,
    "data": [
        {
            "id": 1,
            "parent_id": 0,
            "target": "_self",
            "icon": "",
            "category": "Корневая категория"
        },
        {
            "id": 2,
            "parent_id": 1,
            "target": "_self",
            "icon": "",
            "category": "Дочерняя категория"
        },
        {
            "id": 3,
            "parent_id": 2,
            "target": "_self",
            "icon": null,
            "category": "Третий уровень"
        },
        {
            "id": 4,
            "parent_id": 3,
            "target": "_self",
            "icon": null,
            "category": "Ещё один грёбаный уровень"
        },
        {
            "id": 5,
            "parent_id": 3,
            "target": "_self",
            "icon": null,
            "category": "На ещё"
        },
        {
            "id": 61,
            "parent_id": 4,
            "target": "_self",
            "icon": null,
            "category": "Водка"
        }
    ]
}

Добавлено через 4 минуты
Фух.

Исправил:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
было так
json.data.forEach((e, i, a) => {
                if (i > 0) {
                    if (e.parent_id !== 0) {
                        e.category = `${a.find(el => el.id === i).category} > ${e.category}`;
                    }
                }
            });
 
 
стало так
json.data.forEach((e, i, a) => {
                if (i > 0) {
                    if (e.parent_id !== 0) {
                        e.category = `${a.find(el => el.id === e.parent_id).category} > ${e.category}`;
                    }
                }
            });

аргумент i не какого отношения не имеет к сравнению.

Спасибо!
��

Qwerty_Wasd · 30.01.2019, 05:33

Popryduhin_, не успел написать - зайдите в песочницу, поправил.

JavaScript
1
2
3
aJSON.data.forEach((e, i, a) => {
  if (i > 0) e.category = `${a.find(el => el.id === e.parent_id).category} > ${e.category}`;
});

Добавлено через 33 секунды
Лишний if

@Popryduhin_ · 30.01.2019, 05:38 **[ТС]**

Qwerty_Wasd, Конечный результат

JavaScript
1
2
3
4
5
6
7
json.data.forEach((e, i, a) => {
 
                if (e.parent_id !== 0) {
                    e.category = `${a.find(el => el.id === e.parent_id).category} > ${e.category}`;
                }
 
            });

if нужен, для проверки на родителя.

parent_id = 0 // родителя нет
parent_id > 0 // родитель есть, работаем...

Qwerty_Wasd · 30.01.2019, 05:40

Не по теме:

Разницы в принципе не было, главное Вас устраивает ))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	29.01.2019, 23:25 [ТС]
	Qwerty_Wasd, в виде объекта 0

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	29.01.2019, 23:29 [ТС]
	Задача состоит в том, что не нужно строить дерево, нужно псевдо дерево. Корневая категория Корневая категория -> Дочерняя Добавлено через 1 минуту Как в OpenCart 0

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	29.01.2019, 23:53 [ТС]
	0

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	29.01.2019, 23:59 [ТС]
	Qwerty_Wasd, Браво!!!! Фантастика! 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	30.01.2019, 00:03
	Popryduhin_, хорошо, раз сюрпризов нет - пользуйтесь на здоровье 1

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	30.01.2019, 00:05 [ТС]
	Не как не могу понять как работает функция find ))) и в целом эта конструкция e.category = `${a.find( el => el.id === String(i)).category} > ${e.category}`; 0

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	30.01.2019, 00:08 [ТС]
	Qwerty_Wasd, Я отрываюсь теперь 1

@Popryduhin_ 4 / 4 / 0 Регистрация: 29.01.2019 Сообщений: 155 Записей в блоге: 1
	30.01.2019, 00:10 [ТС]
	Радуюсь как ребёнок )) 0

Qwerty_Wasd
	30.01.2019, 05:40
	Не по теме: Разницы в принципе не было, главное Вас устраивает )) 0

Многоуровневое меню JavaScript

Решение