如何用jQuery从表格变体生成嵌套层级对象？求技术方案

我最近在尝试用jQuery处理表格里的产品变体数据，想要把这些数据转换成指定格式的嵌套层级对象，但试了好几种方法都没成功，有没有大佬能帮忙看看？

先贴下我的HTML结构：

<table>
  <tr class="variants">
    <td> 100g/ <input id="100g" name="variant_name" type="hidden" value="100g"> m/ <input id="m" name="variant_name" type="hidden" value="m"> blue <input id="blue" name="variant_name" type="hidden" value="blue"> </td>
    <td> <input placeholder="SKU" name="sku" type="text" value="1-3"> </td>
    <td><input placeholder="Image" name="image" type="text" value="link"></td>
    <td><input placeholder="Price" name="price" type="text" value="9"></td>
  </tr>
  <tr class="variants">
    <td> 100g/ <input id="100g" name="variant_name" type="hidden" value="100g"> s/ <input id="s" name="variant_name" type="hidden" value="s"> blue <input id="blue" name="variant_name" type="hidden" value="blue"> </td>
    <td> <input placeholder="SKU" name="sku" type="text" value="1-3"> </td>
    <td><input placeholder="Image" name="image" type="text" value="link"></td>
    <td><input placeholder="Price" name="price" type="text" value="9"></td>
  </tr>
  <tr class="variants">
    <td> 200g/ <input id="200g" name="variant_name" type="hidden" value="200g"> m/ <input id="m" name="variant_name" type="hidden" value="m"> blue <input id="blue" name="variant_name" type="hidden" value="blue"> </td>
    <td> <input placeholder="SKU" name="sku" type="text" value="1-3"> </td>
    <td><input placeholder="Image" name="image" type="text" value="link"></td>
    <td><input placeholder="Price" name="price" type="text" value="9"></td>
  </tr>
  <tr class="variants">
    <td> 200g/ <input id="200g" name="variant_name" type="hidden" value="200g"> s/ <input id="s" name="variant_name" type="hidden" value="s"> blue <input id="blue" name="variant_name" type="hidden" value="blue"> </td>
    <td> <input placeholder="SKU" name="sku" type="text" value="1-3"> </td>
    <td><input placeholder="Image" name="image" type="text" value="link"></td>
    <td><input placeholder="Price" name="price" type="text" value="9"></td>
  </tr>
</table>

我想要生成的嵌套对象格式是这样的：

{
  "100g":{
    "m":{
      "blue":{
        "sku":"1-3",
        "image":"link",
        "price": "9"
      }
    },
    "s":{
      "blue":{
        "sku":"1-3",
        "image":"link",
        "price": "9"
      }
    }
  },
  "200g":{
    "m":{
      "blue":{
        "sku":"1-3",
        "image":"link",
        "price": "9"
      }
    },
    "s":{
      "blue":{
        "sku":"1-3",
        "image":"link",
        "price": "9"
      }
    }
  }
}

解决方案 #

这里给你提供一个可行的jQuery实现思路，核心是遍历每一行变体数据，逐层构建嵌套对象：

$(document).ready(function() {
  // 初始化最终的嵌套对象
  const variantObj = {};

  // 遍历每一行变体
  $('.variants').each(function() {
    const $row = $(this);
    // 获取当前行的所有变体值（隐藏域的value）
    const variantLevels = $row.find('input[name="variant_name"]').map(function() {
      return $(this).val();
    }).get();
    
    // 获取当前行的sku、image、price
    const sku = $row.find('input[name="sku"]').val();
    const image = $row.find('input[name="image"]').val();
    const price = $row.find('input[name="price"]').val();

    // 逐层构建嵌套结构
    let currentLevel = variantObj;
    for (let i = 0; i < variantLevels.length; i++) {
      const level = variantLevels[i];
      // 如果当前层级不存在，就初始化一个空对象
      if (!currentLevel[level]) {
        currentLevel[level] = {};
      }
      // 如果是最后一层，赋值sku等属性
      if (i === variantLevels.length - 1) {
        currentLevel[level] = {
          sku: sku,
          image: image,
          price: price
        };
      } else {
        // 否则进入下一层级
        currentLevel = currentLevel[level];
      }
    }
  });

  // 打印结果，你可以根据需求使用这个对象
  console.log(variantObj);
});

代码说明 #

• 首先初始化一个空对象variantObj用来存储最终的嵌套结构
• 遍历每一行.variants，获取该行所有变体层级的value，存入数组variantLevels
• 获取当前行的sku、image、price属性值
• 通过循环逐层构建嵌套：从最外层对象开始，每一层如果不存在就创建空对象，到最后一层时把sku等属性赋值进去
• 最后得到的variantObj就是你想要的格式

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