jQuery код для динамического построения разборного UL из JSON строк

Question

Я новая пчела в мире JavaScript и jQuery.

Может кто-нибудь помочь мне в создании jQuery функции, которая возвращает динамический c разборный "ul" из массива JSON. Я пробовал разные решения, такие как jstree, jsonview, render json из разных репозиториев кода и некоторые ответы на переполнение стека, но, похоже, ничего не работает для моего варианта использования.

Вот пример JSON Array:

[
  {
    "name": "forwarding_options",
    "type": {
      "fields": [
        {
          "metadata": {},
          "name": "PICKUP_SERVICE",
          "nullable": true,
          "type": "string"
        },
        {
          "metadata": {},
          "name": "TWO_MAN_DELIVERY",
          "nullable": true,
          "type": "string"
        }
      ],
      "type": "struct"
    }
  },
  {
    "name": "fulfillment_time",
    "type": "string"
  },
  {
    "name": "merchant_delivery_text",
    "type": "string"
  },
  {
    "name": "status",
    "type": "string"
  },
  {
    "name": "type",
    "type": "string"
  }
]  

Мне нужно что-то похожее на приведенную ниже ссылку, чтобы я мог прикрепить тег таблицы td:

www.w3schools.com/howto/howto_js_treeview Спасибо

Answer 1

Надеюсь, это поможет вам.

var jsonarr = [{
    "name": "forwarding_options",
    "type": {
      "fields": [{
          "metadata": {},
          "name": "PICKUP_SERVICE",
          "nullable": true,
          "type": "string"
        },
        {
          "metadata": {},
          "name": "TWO_MAN_DELIVERY",
          "nullable": true,
          "type": "string"
        }
      ],
      "type": "struct"
    }
  },
  {
    "name": "fulfillment_time",
    "type": "string"
  },
  {
    "name": "merchant_delivery_text",
    "type": "string"
  },
  {
    "name": "status",
    "type": "string"
  },
  {
    "name": "type",
    "type": "string"
  }
];

var ret_html = '';


jQuery.each(jsonarr, function(index, mainitem) {
  ret_html += '<li>' + mainitem['name'] + '</li>';
  jQuery.each(mainitem, function(index, items) {
    if (items['fields']) {
      ret_html += '<li><span class="caret">Fields</span>';
      ret_html += '<ul class="nested">';
      jQuery.each(items['fields'], function(index, tree) {

        ret_html += '<li>' + tree['name'] + '</li>';

      });
      ret_html += '</ul>'
      ret_html += '</li>';
    }
  });
});
jQuery('#returnresult').append(ret_html);

var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

/* Remove default bullets */

ul,
#myUL {
  list-style-type: none;
}


/* Remove margins and padding from the parent ul */

#myUL {
  margin: 0;
  padding: 0;
}


/* Style the caret/arrow */

.caret {
  cursor: pointer;
  user-select: none;
  /* Prevent text selection */
}


/* Create the caret/arrow with a unicode, and style it */

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}


/* Rotate the caret/arrow icon when clicked on (using JavaScript) */

.caret-down::before {
  transform: rotate(90deg);
}


/* Hide the nested list */

.nested {
  display: none;
}


/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUL">
  <li><span class="caret">Json array</span>
    <ul id="returnresult" class="nested">
    </ul>
  </li>
</ul>