Как преобразовать этот код jQuery в ванильный Javascript?

Я пытаюсь преобразовать этот код jquery в ванильный javascript. На самом деле этот код строит вложенный ulli на лету с этими данными json. Может ли кто-нибудь помочь мне с этим?

Вот мой код

var tree = [
  {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [
          {
            name: 'Broccoli',
            children: [{ name: 'Broccoli-sub1' }, { name: 'Broccoli-sub2' }],
          },
          { name: 'cabbage' },
          { name: 'Brussels' },
        ],
      },

      {
        name: 'Orange',
        children: [{ name: 'Pumpkins' }, { name: 'Carrots' }],
      },
    ],
  },
];

function recursive_tree(data, tag, child_wrapper, level) {
  var html = [];
  //return html array;
  level = level || 0;
  child_wrapper = child_wrapper != false ? child_wrapper : 'ul';
  $.each(data, function (i, obj) {
    var el = $('<' + tag + '>');
    el.html(obj.name);
    if (obj.hasOwnProperty('children')) {
      var wrapper = $('<' + child_wrapper + '>');
      var els = recursive_tree(obj.children, tag, child_wrapper);
      wrapper.append(els);
      wrapper.appendTo(el);
    }
    html.push(el);
  });

  return html;
}

var html = recursive_tree(tree, 'li', 'ul');
console.info(html);
$('#parent').append(html);
`enter code here`;

javascript jquery treeview

26.12.2020 18:52

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

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

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

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

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

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

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

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

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

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

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

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

116

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

Ответы 1

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

Есть много способов сделать это. Вот способ сгенерировать внутренний html

var tree = [{
  "name": 'Vegetables',
  "children": [{
      "name": 'Green',
      "children": [{
          "name": 'Broccoli',
          "children": [{
              "name": "Broccoli-sub1"
            },
            {
              "name": "Broccoli-sub2"
            }
          ]
        },
        {
          "name": "cabbage"
        },
        {
          "name": 'Brussels'
        },
      ]
    },

    {
      "name": 'Orange',
      "children": [{
          "name": 'Pumpkins'
        },
        {
          "name": 'Carrots'
        },
      ]
    },
  ]
}]

function recursive_tree(data, tag, child_wrapper, level) {
  let html = [];
  //return html array;
  level = level || 0;
  child_wrapper = !child_wrapper ? child_wrapper : 'ul';
    
  data.forEach(obj => {
    html.push(`<${tag}>${obj.name}`);
    if (obj.hasOwnProperty('children')) {
        html.push(`<${child_wrapper}>`);
      html = html.concat(recursive_tree(obj.children, tag, child_wrapper))
      html.push(`</${child_wrapper}>`);
        }
    html.push(`</${tag}>`);
    });

  return html;
}

var html = recursive_tree(tree, 'li', 'ul');
console.info(html);
const parent = document.getElementById('parent');
parent.innerHTML += html.join("");

<div id = "parent"></div>

Большое спасибо, сэр. Это действительно решило мою проблему. ты действительно великолепен.

— 26.12.2020 21:54

Я очень благодарен вам, я только начал изучать javascript, На самом деле, весь день я пытался это сделать. Наконец-то вы сделали это простым, чтобы сделать мое древовидное представление. Большое спасибо.

— 26.12.2020 22:03

26.12.2020 19:34