本文详解如何将 laravel 查询结果（collection）转换为嵌套结构的 json 数据，用于前端 javascript 级联下拉菜单（如品类 → 子类 → 型号），并解决 blade 模板中安全输出 json 的关键问题。
在构建多级联动选择器（例如「分类 → 子分类 → 具体型号」）时，后端需提供结构清晰、可直接被 JavaScript 解析的嵌套 JSON 数据。Laravel 的集合（Collection）提供了强大而简洁的链式方法，可高效完成从数据库原始结果到目标 JSON 的转换。
✅ 正确的数据处理流程
假设你已通过 Eloquent 或 Query Builder 获取了去重且字段完整的数据：
$collection = DB::table('products')
->select('category', 'sub_category', 'model')
->whereNotNull('category')
->whereNotNull('sub_category')
->whereNotNull('model')
->distinct()
->get();接下来，使用 Collection 方法逐层分组与提取：
$jsonData = $collection
->groupBy('category') // 第一层：按 category 分组
->map(function ($byCategory) {
return $byCategory
->groupBy('sub_category') // 第二层：每个 category 内按 sub_category 分组
->map(function ($bySubCategory) {
return $bySubCategory->pluck('model')->values(); // 提取所有 model 并重置索引
})
->toArray(); // 转为关联数组，确保 JSON 键名保留
})
->toJson(JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);? 关键点说明：->values() 确保模型列表为纯数字索引数组（避免 JSON 中出现冗余键）；JSON_UNESCAPED_UNICODE 防止中文被转义为 \uXXXX；JSON_PRETTY_PRINT 仅用于调试，生产环境建议省略以减小体积。
✅ 在 Blade 模板中安全输出 JSON
❌ 错误写法（XSS 风险 + 语法错误）：
var subjectObject = "{{ $jsonData }}"; // 字符串包裹导致 JS 解析失败，且未转义✅ 正确写法（推荐）：
<script>
var subjectObject = @json($jsonData); // Laravel 内置 @json 指令，自动转义并输出合法 JS 对象
</script>? @json() 是 Laravel 5.5+ 提供的安全辅助指令，它等价于 json_encode($data, JSON_UNESCAPED_UNICODE) 并自动适配 HTML/JS 上下文，无需手动 htmlspecialchars 或双花括号插值。
✅ 完整示例（控制器 + Blade）
Controller:
public function index()
{
$jsonData = Product::select('category', 'sub_category', 'model')
->whereNotNull('category')
->whereNotNull('sub_category')
->whereNotNull('model')
->distinct()
->get()
->groupBy('category')
->map(fn($items) => $items
->groupBy('sub_category')
->map(fn($subs) => $subs->pluck('model')->values())
->toArray()
)
->toJson(JSON_UNESCAPED_UNICODE);
return view('products.index', compact('jsonData'));
}Blade (resources/views/products/index.blade.php):
<script>
const subjectObject = @json($jsonData);
// 示例：动态生成第一级下拉
const categorySelect = document.getElementById('category');
Object.keys(subjectObject).forEach(cat => {
const opt = document.createElement('option');
opt.value = cat;
opt.textContent = cat;
categorySelect.appendChild(opt);
});
// 后续可结合 W3Schools 级联逻辑实现二级/三级联动
</script>⚠️ 注意事项
- 确保数据库字段（category, sub_category, model）无空格或特殊字符干扰分组逻辑；必要时使用 trim() 或 DB::raw("TRIM(category)") 预处理；
- 若存在大量数据，考虑添加缓存（如 Cache::remember()）避免每次请求重复计算；
- 前端使用时建议对 subjectObject 做存在性校验（if (subjectObject && typeof subjectObject === 'object')），增强健壮性。
通过以上方式，你即可获得结构规范、语义清晰、开箱即用的多维 JSON 数据，无缝对接 JavaScript 级联交互逻辑。
