Преобразование плоского JSON в дерево JSON с помощью Javascript

Вот формат вывода JSON, который я получаю

oldJSON = [
{ "Node": "Node1", "NodeParent": "" },
{ "Node": "Node1A", "NodeParent": "Node1" },
{ "Node": "Node1B", "NodeParent": "Node1" },
{ "Node": "Node2", "NodeParent": "" },
{ "Node": "Node2A", "NodeParent": "Node2" },
{ "Node": "Node2B", "NodeParent": "Node2" },
{ "Node": "Node3", "NodeParent": "" },
{ "Node": "Node3A", "NodeParent": "Node3" },
{ "Node": "Node3A1", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A2", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A3", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A1x", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1y", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1z", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3B", "NodeParent": "Node3" },
{ "Node": "Node3B1", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B2", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B3", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B1x", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1y", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1z", "NodeParent": "Node3;Node3B:Node3B1" }]

Я хотел бы преобразовать этот JSON выше в древовидную структуру, как показано ниже.

NewJsonArray = [
{
    "Node": "Node1",
    "children": [
        {
            "Node": "Node1A"
        },
        {
            "Node": "Node1B"
        }
    ]
},
{
    "Node": "Node2",
    "children": [
        {
            "Node": "Node2A"
        },
        {
            "Node": "Node2B"
        }
    ]
},
{
    "Node": "Node3",
    "children": [
        {
            "Node": "Node3A"
        },
        {
            "Node": "Node3B"
        }
    ],
    "Node3A": {
        "Node": "Node3A",
        "children": [
            {
                "Node": "Node3A1"
            },
            {
                "Node": "Node3A2"
            },
            {
                "Node": "Node3A3"
            }
        ],
        "Node3A1": {
            "Node": "Node3A1",
            "children": [
                {
                    "Node": "Node3A1x"
                },
                {
                    "Node": "Node3A1y"
                },
                {
                    "Node": "Node3A1z"
                }
            ]
        }
    },
    "Node3B": {
        "Node": "Node3B",
        "children": [
            {
                "Node": "Node3B1"
            },
            {
                "Node": "Node3B2"
            },
            {
                "Node": "Node3B3"
            }
        ],
        "Node3B1": {
            "Node": "Node3B1",
            "children": [
                {
                    "Node": "Node3B1x"
                },
                {
                    "Node": "Node3B1y"
                },
                {
                    "Node": "Node3B1z"
                }
            ]
        }
    }
}

]

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

NodeParent всегда содержит весь путь к узлу? пожалуйста, добавьте свою попытку.

— 22.11.2018 18:37

Это не JSON, а массив объектов -> В чем разница между JSON и Object Literal Notation?

— 22.11.2018 18:39

@NinaScholz, да правильно NodeParent содержит всегда весь путь к ноде.

— 24.11.2018 02:58

javascript arrays json ecmascript-6

22.11.2018 18:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

730

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Для чего-то вроде этого проще всего сначала создать вложенный объект с именами корневых узлов в качестве ключей для верхнего уровня, что можно сделать с помощью Array#reduce().

Затем разделите значения NodeName на массив и используйте еще один метод reduce (), чтобы пройти через родителей, чтобы заставить конкретного родителя нажать на

Наконец, получите внешний массив из основного объекта с помощью Object.values ()

const map = data.reduce((a,{Node,NodeParent})=>{
   if (!NodeParent){
      a[Node]  = { Node, children:[] };
   }else{     
      const parent = NodeParent.split(/;|:/g).reduce((a,c)=>{
           a[c] = a[c] || { Node:c, children:[] };
           return a[c]
      },a);
     
      parent.children.push({Node})
   }
   return a;
},{});

const res = Object.values(map);

console.info(JSON.stringify(res,null,4));

.as-console-wrapper {  max-height: 100%!important;}

<script>
const data = [
{ "Node": "Node1", "NodeParent": "" },
{ "Node": "Node1A", "NodeParent": "Node1" },
{ "Node": "Node1B", "NodeParent": "Node1" },
{ "Node": "Node2", "NodeParent": "" },
{ "Node": "Node2A", "NodeParent": "Node2" },
{ "Node": "Node2B", "NodeParent": "Node2" },
{ "Node": "Node3", "NodeParent": "" },
{ "Node": "Node3A", "NodeParent": "Node3" },
{ "Node": "Node3A1", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A2", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A3", "NodeParent": "Node3;Node3A" },
{ "Node": "Node3A1x", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1y", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3A1z", "NodeParent": "Node3;Node3A:Node3A1" },
{ "Node": "Node3B", "NodeParent": "Node3" },
{ "Node": "Node3B1", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B2", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B3", "NodeParent": "Node3;Node3B" },
{ "Node": "Node3B1x", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1y", "NodeParent": "Node3;Node3B:Node3B1" },
{ "Node": "Node3B1z", "NodeParent": "Node3;Node3B:Node3B1" }]
</script>

ваше решение чрезвычайно полезно, но результат немного отличается от желаемого. Вывод вашего фрагмента кода: "Узел": "Узел3", "дети": [{"Узел": "Узел3А"}], "Узел3А": {"Узел": "Узел3А", "дети": [{"Узел ":" Node3A1 "}, {" Node ":" Node3A2 "}, {" Node ":" Node3A3 "}] Желаемый результат:" Node ":" Node3 "," children ": [{" Node ":" Node3A "," children ": [{" Node ":" Node3A1 "," children ": [{" Node ":" Node3A1x "}, {" Node ":" Node3A1y "}, {" Node ":" Node3A1z "} ]}, {"Node": "Node3A2"}, {"Node": "Node3A3"}] Надеюсь, это поможет

— 23.11.2018 05:17

Да, я вижу это. Не заметил того в первый раз. Немного поработаю и дам знать

— 23.11.2018 05:27

22.11.2018 19:20