如何使用JSON数据显示子类别列表

{
  "categories": [
    {
      "id": 1,
      "name": "电子产品",
      "subcategories": [
        {
          "id": 101,
          "name": "手机"
        },
        {
          "id": 102,
          "name": "电脑"
        }
      ]
    },
    {
      "id": 2,
      "name": "家居用品",
      "subcategories": [
        {
          "id": 201,
          "name": "家具"
        },
        {
          "id": 202,
          "name": "厨具"
        }
      ]
    }
  ]
}

var jsonData = '{"categories":[{"id":1,"name":"电子产品","subcategories":[{"id":101,"name":"手机"},{"id":102,"name":"电脑"}]},{"id":2,"name":"家居用品","subcategories":[{"id":201,"name":"家具"},{"id":202,"name":"厨具"}]}]}';
var data = JSON.parse(jsonData);

<ul id="subcategory-list"></ul>

<script>
  var subcategoryList = document.getElementById("subcategory-list");
  
  // 遍历主类别
  for (var i = 0; i < data.categories.length; i++) {
    var category = data.categories[i];
    
    // 创建主类别标题
    var categoryTitle = document.createElement("h3");
    categoryTitle.textContent = category.name;
    subcategoryList.appendChild(categoryTitle);
    
    // 创建子类别列表
    var subcategoryUl = document.createElement("ul");
    
    // 遍历子类别
    for (var j = 0; j < category.subcategories.length; j++) {
      var subcategory = category.subcategories[j];
      
      // 创建子类别项
      var subcategoryLi = document.createElement("li");
      subcategoryLi.textContent = subcategory.name;
      subcategoryUl.appendChild(subcategoryLi);
    }
    
    // 将子类别列表添加到主类别下
    subcategoryList.appendChild(subcategoryUl);
  }
</script>