Нужна помощь в заполнении дерева PrimeReact

Я пытаюсь заполнить дерево PrimeReact данными из базы данных sqlite3, но это не работает.

Вот мой SQL-запрос:

select 'prj:'||p.id as key,p.name as label,(
select json_group_array(json_object('key',key,'label',label))
from(
    select 'tpr:'||tpr.id as key,tpr.name as label from tpr
    where tpr.prjid=p.id
    and tpr.active = "true"
    order by tpr.id
    )
    ) as children
from prj p,usr_right r
where p.id=r.prjid
and p.active = "true"
and r.usrid=$1
order by p.id

Я получаю следующий JSON-код:

[
{
key: 'prj:1',
label: 'Projekt 1',
children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]'
},
{ key: 'prj:2', label: 'Projekt 3', children: '[]' },
{ key: 'prj:3', label: 'Projekt 2', children: '[]' }
]

Это нормально, но я понял, что дочерние элементы не отображаются, потому что в пути к дочерним элементам есть кавычки вокруг квадратных скобок - как я могу это исправить?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если initial — это ваш json, который нужно сопоставить с Tree, вам нужно внести небольшую модификацию, чтобы преобразовать строку в массив.

let initial = [
{
key: 'prj:1',
label: 'Projekt 1',
children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]'
},
{ key: 'prj:2', label: 'Projekt 3', children: '[]' },
{ key: 'prj:3', label: 'Projekt 2', children: '[]' }
]

let converted = initial.map(obj => ({ ...obj, children: JSON.parse(obj.children)}))

console.info(converted)

Теперь это работает...

Ramirez 13.05.2022 16:09

Другие вопросы по теме