如何通过JavaScript动态生成多面板的JSON数组并追加对象

我帮你梳理下当前代码的问题，然后给出修正后的解决方案，完美实现你想要的多面板数据整合到同一JSON数组的需求：

当前代码的核心问题 #

1. 直接拼接字符串容易出现语法错误（比如数组末尾多余的逗号），而且难以维护
2. 全局遍历所有label，会把不同面板的表单元素混在一起
3. 没有正确获取每个文本框的真实输入值，只是写死了占位文本
4. 没有考虑多个面板的批量处理逻辑，只生成了单个对象的结构

修正后的完整代码 #

function GenerateYaml(btn) {
    $('#generatedYamlTextField').removeAttr("hidden");
    // 初始化空数组，用来存储所有面板的配置对象
    const panelDataArray = [];
    
    // 遍历所有目标面板（这里匹配所有id以formpanel开头的面板，可根据你的需求调整选择器）
    $('[id^="formpanel"]').each(function () {
        const $currentPanel = $(this);
        // 获取当前面板对应的模块名（比如win_acl）
        const moduleName = $currentPanel.attr("data-title-caption");
        // 存储当前面板的配置项
        const moduleConfig = {};
        
        // 只遍历当前面板内的label，避免跨面板混淆
        $currentPanel.find('label').each(function () {
            const labelKey = $(this).text().trim();
            // 根据label的for属性找到对应的文本框（如果你的DOM结构不同，可调整这里的选择逻辑）
            const $targetInput = $('#' + $(this).attr('for'));
            // 获取文本框的真实值
            const inputValue = $targetInput.val().trim();
            
            // 将键值对添加到模块配置中
            moduleConfig[labelKey] = inputValue;
        });
        
        // 组装当前面板的完整对象
        const panelItem = {
            "name": `Configure ${moduleName}`, // 这里可以自定义name的文本内容
            [moduleName]: moduleConfig // 动态使用模块名作为对象键
        };
        
        // 将当前面板对象加入数组
        panelDataArray.push(panelItem);
    });
    
    // 将数组转为格式化的JSON字符串（缩进2个空格，和你示例的格式一致）
    const formattedJson = JSON.stringify(panelDataArray, null, 2);
    // 清空文本框后添加生成的JSON（避免多次点击重复追加）
    $("#yamltextfield").empty().append(formattedJson);
}

关键改进点说明 #

• 用数组存储对象而非字符串拼接：彻底避免手动拼接导致的语法错误，JSON.stringify会自动生成符合规范的JSON格式，包括正确的数组逗号分隔
• 面板内元素精准遍历：用$currentPanel.find('label')替代全局$('label')，确保每个面板只处理自己的表单元素
• 动态获取输入值：通过label的for属性关联到对应的文本框，获取用户的真实输入内容，不再用占位文本
• 动态对象键：使用ES6的计算属性名[moduleName]，让每个面板的模块名（比如win_acl）自动成为对象的键，完美匹配你想要的JSON结构
• 格式化输出：JSON.stringify的第三个参数设置为2，生成带缩进的美观JSON，和你给出的示例格式完全一致

这样修改后，点击按钮就能生成包含所有面板数据的JSON数组，和你最开始展示的示例结构完全匹配啦～

内容的提问来源于stack exchange，提问作者Mouaad Ben Allal