Laravel如何在视图中遍历展示JSON列additional_info数据？

后端解析后在视图循环（以Laravel为例） #

1. 控制器中先将JSON列转为数组：

$record = YourModel::find($targetId);
$additionalData = json_decode($record->additional_info, true);
return view('pages.detail', compact('additionalData'));

2. Blade视图里遍历渲染<a>标签：

@foreach($additionalData as $fieldKey => $fieldValue)
    <!-- 把Addphone这类字段名转成Phone作为显示文本，链接用对应的值 -->
    <a href="{{ $fieldValue }}" class="contact-link">
        {{ ucfirst(preg_replace('/^Add/', '', $fieldKey)) }}
    </a>
@endforeach

如果你的JSON是嵌套对象结构（比如每个项包含url和label），调整为：

@foreach($additionalData as $item)
    <a href="{{ $item['url'] }}" class="contact-link">{{ $item['label'] }}</a>
@endforeach

前端直接处理JSON（原生JS场景） #

如果是前端直接拿到JSON字符串后自行处理：

// 假设从后端获取到JSON数据（模板变量或API返回）
const additionalInfo = JSON.parse('{!! $record->additional_info !!}');
const container = document.getElementById('info-links');

Object.entries(additionalInfo).forEach(([key, val]) => {
    const link = document.createElement('a');
    link.href = val;
    // 处理显示文本：去掉开头的Add，首字母大写
    link.textContent = key.replace(/^Add/, '').replace(/^./, match => match.toUpperCase());
    link.classList.add('contact-link');
    container.appendChild(link);
});

关键注意点 #

• 先验证additional_info的JSON格式是否合法，解析失败会导致循环无法执行
• 根据实际的JSON结构调整取值逻辑，比如部分字段可能是嵌套对象，需对应提取链接和文本
• 可给<a>标签添加样式类，优化展示效果

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