JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="org" style="">
<li>
  Food Rest
  <ul>
    <li>Beer</li>
    <li>Vegetables
      <ul>
        <li>Pumpkin</li>
        <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
      </ul>
    </li>
    <li>Bread</li>
    <li>Chocolate
      <ul>
        <li>Topdeck</li>
        <li>Reese's Cups</li>
      </ul>
    </li>
  </ul>
</li>
</ul>

<h3>List Json: </h3>
<div id="listJson"></div>

JavaScript

var getChildrensData = function(parentNode){
    var nodes = [];
	var $parentNode = $(parentNode);
    $parentNode.children('li').each(function(index, li){
    var nodeData = {};
    var nodeText = $(li).contents().filter(function() {
  return this.nodeType == 3;
}).text();
    nodeData.text = nodeText.trim().replace('\n', '');
    if($(li).children('ul').length>0){
        nodeData.children = getChildrensData($(li).children('ul'))
    }
        nodes.push(nodeData);
    });
    
    return nodes;
}

var treeData = getChildrensData($('#org'));

$('#listJson').html(JSON.stringify(treeData))