如何在jQuery中将含嵌套数组对象的数组序列化为字符串

我有一个从数据库获取的嵌套结构对象（注：原代码里的cheese_array实际是JavaScript对象，并非数组），包含若干属性和多组嵌套数组。修正语法错误后的代码如下：

var cheese_array = {
  name: "Chedder",
  place: "Brie",
  string1: "Blue Stilton",
  first_inner_array: [
    {
      name: "fi_Chedder",
      smelly: true
    },
    {
      name: "fi_Brie",
      smelly: false
    },
    {
      name: "fi_Blue Stilton",
      smelly: true
    }
  ],
  second_inner_array: [
    {
      name: "si_Chedder",
      smelly: true
    },
    {
      name: "si_Brie",
      smelly: false
    },
    {
      name: "si_Blue Stilton",
      smelly: true
    }
  ],
  third_inner_array: [
    {
      name: "ti_Chedder",
      smelly: true
    },
    {
      name: "ti_Brie",
      smelly: false
    },
    {
      name: "ti_Blue Stilton",
      smelly: true
    }
  ]
}

我尝试了以下方法但均遇到问题：

• 使用$.each遍历cheese_array，序列化后显示[object, object]
• 将嵌套数组赋值给变量后，通过$('#divID').val()赋值到HTML的div中，读取时显示为空数组
• 使用多层$.each遍历嵌套数组，仍无法获取具体值，仅显示对象

解决方法 #

1. 先理清概念：你操作的是对象，不是数组 #

原代码里的cheese_array是用{}定义的JavaScript对象，而非数组（数组用[]定义），这是遍历出错的核心原因之一。

2. 快速序列化嵌套结构（转成可读字符串） #

如果只是需要把整个结构转成可阅读的字符串，直接用JSON.stringify()即可，它完美支持嵌套结构：

// 序列化整个对象，第二个参数为null，第三个参数2表示缩进2格，方便阅读
const serializedStr = JSON.stringify(cheese_array, null, 2);
// 给div赋值用text()，不要用val()——val()只针对input、select这类表单控件
$('#divID').text(serializedStr);

3. 手动遍历渲染成友好的HTML结构 #

如果要渲染成更美观的结构化内容（比如列表），可以用嵌套遍历实现：

const $targetDiv = $('#divID');
$targetDiv.empty(); // 先清空目标容器

// 遍历外层对象的所有键值对
$.each(cheese_array, function(key, value) {
  if (Array.isArray(value)) {
    // 处理嵌套数组：先添加数组标题
    $targetDiv.append(`<h4>${key}</h4>`);
    // 创建列表容器
    const $list = $('<ul style="margin-left:16px;"></ul>');
    // 遍历数组里的每个对象
    $.each(value, function(_, item) {
      // 拼接对象的属性为可读文本
      const itemContent = `名称：${item.name}，是否刺鼻：${item.smelly ? '是' : '否'}`;
      $list.append(`<li>${itemContent}</li>`);
    });
    $targetDiv.append($list);
  } else {
    // 处理普通属性：直接渲染键值对
    $targetDiv.append(`<p><strong>${key}</strong>：${value}</p>`);
  }
});

4. 解决遍历嵌套数组只显示对象的问题 #

之前多层$.each没拿到具体值，是因为你直接输出了对象本身，没有访问它的属性。比如遍历first_inner_array的正确写法：

$.each(cheese_array.first_inner_array, function(_, item) {
  // 必须明确访问item的name、smelly属性，而不是直接打印item
  console.log(item.name, item.smelly);
  // 如果要渲染到HTML，同样要拼接属性值
  $('#someElement').append(`<p>${item.name} - ${item.smelly}</p>`);
});

内容的提问来源于stack exchange，提问作者joseph thomas