TypeScript中嵌套数组JSON转嵌套JSON对象适配Kendo Grid

我正在TypeScript中处理REST API返回的JSON数据，这个数据包含多层嵌套的单元素数组，现在需要将其转换为纯嵌套对象的结构，以便绑定到Kendo Grid。目前我只完成了将顶层对象转为数组的步骤，但还没处理内部的嵌套数组。

原始API返回数据 #

{ 
  "ID":29614,
  "Ratio":8,
  "UOM":"IN", 
  "manufacturers": [
    { 
      "manufacturerName": "john", 
      "categories": [
        { 
          "categoryName": "Beverage", 
          "products": [
            { 
              "uid": "567", 
              "productID": 130927, 
              "name": "After Shocks Popping Candy 1.06"
            }
          ] 
        }
      ] 
    },
    { 
      "manufacturerName": "Dan", 
      "categories": [
        { 
          "categoryName": "Organization", 
          "products": [
            { 
              "uid": "65", 
              "productID": 5656, 
              "name": "After Shocks Popping Candy 2.06"
            }
          ] 
        }
      ] 
    }
  ] 
}

期望转换后的数据结构 #

（修正了原示例中的JSON语法错误，保留多元素的manufacturers数组，仅将单元素数组转为对象）

[
  { 
    "ID":29614,
    "Ratio":8,
    "UOM":"IN", 
    "manufacturers": [
      { 
        "manufacturerName": "john", 
        "categories": { 
          "categoryName": "Beverage", 
          "products": { 
            "uid": "567", 
            "productID": 130927, 
            "name": "After Shocks Popping Candy 1.06"
          } 
        } 
      },
      { 
        "manufacturerName": "Dan", 
        "categories": { 
          "categoryName": "Organization", 
          "products": { 
            "uid": "65", 
            "productID": 5656, 
            "name": "After Shocks Popping Candy 2.06"
          } 
        } 
      }
    ] 
  }
]

我目前尝试的代码 #

public gridData: any[]; // 用于绑定Kendo Grid的数据源

this.restApi.getProductBin().subscribe((data: {}) => { 
  this.gridData = Array.of(data); // 将顶层对象转为数组
});

解决方案：递归处理嵌套数组 #

要处理所有层级的单元素数组，我们可以写一个递归转换函数，遍历对象的每个属性，将单元素数组替换为对应的对象，同时保留多元素数组的结构：

// 递归转换单元素数组为对象的工具函数
const convertSingleElementArrays = (item: any): any => {
  // 处理数组类型
  if (Array.isArray(item)) {
    // 单元素数组直接转为对应元素
    if (item.length === 1) {
      return convertSingleElementArrays(item[0]);
    }
    // 多元素数组遍历每个元素递归处理
    return item.map(convertSingleElementArrays);
  }
  // 处理对象类型
  if (typeof item === 'object' && item !== null) {
    const convertedObj: Record<string, any> = {};
    for (const key in item) {
      if (item.hasOwnProperty(key)) {
        convertedObj[key] = convertSingleElementArrays(item[key]);
      }
    }
    return convertedObj;
  }
  // 基本类型直接返回
  return item;
};

// 在API订阅中使用转换函数
public gridData: any[];

this.restApi.getProductBin().subscribe((data: {}) => { 
  // 先转换嵌套结构，再转为Grid需要的数组格式
  const processedData = convertSingleElementArrays(data);
  this.gridData = Array.of(processedData); 
});

代码说明 #

• 递归函数convertSingleElementArrays会遍历所有层级的数据：
  • 遇到单元素数组时，直接替换为数组的唯一元素；
  • 遇到多元素数组时，保留数组结构并逐个处理内部元素；
  • 遇到对象时，遍历其所有属性并递归处理每个属性值；
• 最后用Array.of()将顶层对象转为数组，完全适配Kendo Grid的数据源要求。

如果你的需求是要将manufacturers这类多元素数组也转为对象（比如只取第一个元素），只需调整递归逻辑或单独处理该属性即可。

内容的提问来源于stack exchange，提问作者ASP.NET