如何将PowerShell返回的JSON中的名称转换为有序HTML复选框？

步骤1：处理JSON数据并生成HTML #

以下PowerShell脚本会读取你的JSON数据，提取所有Name字段值，然后生成带CSS布局的HTML复选框，确保30个选项也能整齐排列：

# 你的JSON数据（也可以替换为从文件读取：Get-Content "data.json" -Raw）
$jsonData = @"
[{"Name":"grp_SIR_RW"},{"Name":"grp_SIR_R"},{"Name":"grp_SPIE_RW"},{"Name":"grp_GOR_R"}]
"@

# 转换JSON为对象数组并提取名称列表
$groupNames = ($jsonData | ConvertFrom-Json).Name

# 生成HTML内容，包含网格布局的CSS
$htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <style>
        .checkbox-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            padding: 20px;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
    </style>
</head>
<body>
    <div class="checkbox-container">
"@

# 为每个名称添加复选框
foreach ($name in $groupNames) {
    $htmlContent += "        <div class='checkbox-item'><input type='checkbox' id='$name' name='groups' value='$name'><label for='$name'>$name</label></div>`n"
}

# 闭合HTML标签
$htmlContent += @"
    </div>
</body>
</html>
"@

# 输出HTML内容（也可以保存到文件：$htmlContent | Out-File "groups.html" -Encoding UTF8）
$htmlContent

效果说明 #

• 用CSS Grid布局实现自适应列数，当选项增多（最多30个）时，会自动根据页面宽度调整列数，避免横向滚动或排版混乱
• 每个复选框和标签垂直对齐，间距统一，视觉整洁
• 可以根据需求调整minmax(200px, 1fr)中的200px来改变每列最小宽度，或者直接指定固定列数（比如repeat(3, 1fr)强制3列）

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