JSON对象树HTML视图

Question

嗨我已经尝试了很多方法，但似乎我无法得到它，我在json obj下面如何将它显示为使用JavaScript的ul li项目的树HTML视图？

[
  {
    "CategoriesModelId": 7,
    "Name": "Parnet",
    "Parent": null,
    "ParentId": null,
    "Order": 0,
    "Children": [
      {
        "CategoriesModelId": 8,
        "Name": "Child 1",
        "Parent": null,
        "ParentId": null,
        "Order": 0,
        "Children": []
      },
      {
        "CategoriesModelId": 9,
        "Name": "Chil 2 ",
        "Parent": null,
        "ParentId": null,
        "Order": 0,
        "Children": []
      },
      {
        "CategoriesModelId": 10,
        "Name": "Razvan ",
        "Parent": null,
        "ParentId": null,
        "Order": 0,
        "Children": []
      }
    ]
  }
]

Answer 1

以下是我设法做到的，最后

var obj = [
  {
    "CategoriesModelId": 7,
    "Nume": "parent",
    "Parent": null,
    "ParentId": null,
    "Order": 0,
    "Children": [
      {
        "CategoriesModelId": 0,
        "Nume": "Child",
        "Parent": null,
        "ParentId": null,
        "Order": 0,
        "Children": []
      },
      {
        "CategoriesModelId": 0,
        "Nume": "Child",
        "Parent": null,
        "ParentId": null,
        "Order": 0,
        "Children": []
      }
    ]
  },
  {
    "CategoriesModelId": 12,
    "Nume": "Parent 2",
    "Parent": null,
    "ParentId": null,
    "Order": 0,
    "Children": []
  }
]

var html = [];

function createList(arr) {
    html.push('<ul>');
    $.each(arr, function(i, val) {
        html.push('<li>' + val.Nume);
        if (val.Children) {
            createList(val.Children)
           
        }
        html.push('</li>');
    });
    html.push('</ul>');
}
createList(obj)
$('body').append(html.join(''))

ul{ border: 1px solid green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>