如何在jQuery中正确获取隐藏输入框的JSON格式值并渲染？

你碰到的问题其实很常见——隐藏输入框里存的是JSON格式的字符串，但你直接用.val()获取后没做解析，拿到的只是一串文本，不是可操作的JavaScript数组对象。这就导致你循环遍历的时候，是在逐个遍历字符串的字符，而不是数组里的每个对象，自然就会出现undefined的错误。

下面是修正后的完整实现方案，我会把关键改动点标注出来：

核心修正步骤 #

1. 解析JSON字符串为JS对象：使用JSON.parse()把获取到的字符串转成真正的数组，这样才能正常访问每个对象的属性。
2. 增加异常处理：为了避免JSON格式错误导致脚本崩溃，加上try-catch块做容错处理。
3. 确认DOM目标元素存在：确保页面上有#tree1这个容器元素，不然渲染的菜单无处可去。

修正后的完整代码 #

$(function() { 
  try {
    // 关键改动：把JSON字符串解析为JavaScript数组对象
    var data = JSON.parse($('#resultdata').val()); 
    var categories = {}, groupBy = "category_name"; 

    // 按category_name分组数据
    for (var i = 0; i < data.length; i++) { 
      var category = data[i][groupBy];
      if (!categories[category]) {
        categories[category] = [];
      } 
      categories[category].push(data[i]); 
    }; 

    // 渲染树形菜单
    var $treeContainer = $('#tree1');
    if ($treeContainer.length === 0) {
      console.error('树形菜单容器#tree1不存在');
      return;
    }

    for (var key in categories) { 
      if (categories.hasOwnProperty(key)) { 
        var $categoryLi = $('<li>').text(key); 
        var $innerUl = $('<ul>'); 

        // 渲染分类下的子项
        categories[key].forEach(function(item) {
          $('<li>').html(`${item.menu_name}, ${item.id}`).appendTo($innerUl);
        });

        $categoryLi.append($innerUl);
        $categoryLi.appendTo($treeContainer); 
      } 
    } 

    // 初始化树形菜单插件
    $('#tree1').treed(); 
  } catch (e) {
    console.error('JSON解析失败:', e.message);
  }
});

额外说明 #

• 如果你不确定隐藏输入框的JSON格式是否正确，可以在控制台打印$('#resultdata').val()检查，确保它是标准的JSON格式（比如属性名用双引号，字符串也用双引号）。
• 原代码里创建的ul变量没有被使用，我直接把菜单渲染到#tree1容器里，你可以根据自己的DOM结构调整。

内容的提问来源于stack exchange，提问作者Anuja vinod