Laravel中JSON字段数据转数组后回显多输入框的实现问题

嘿，这个场景我太熟悉了！把多个输入框的内容打包成JSON存单个字段，再反向解析回多个输入框，其实利用Laravel的特性就能轻松搞定，不用每次手动json_decode。下面一步步来：

第一步：让模型自动处理JSON与数组的转换 #

首先，别再每次手动调用json_decode了！Laravel的模型自带$casts属性，能帮你自动把JSON字段转成数组，存的时候又自动转回去。

打开你的模型（比如对应$myroute的Route模型），加上这段代码：

class Route extends Model
{
    // 其他代码...

    // 自动将waypoints字段在取出时转成数组，存入时转成JSON
    protected $casts = [
        'waypoints' => 'array',
    ];
}

这样之后，$myroute->waypoints直接就是数组，不用再写json_decode($myroute->waypoints, true)了，省心不少！

第二步：前端渲染输入框（新增/编辑场景） #

接下来要把数组里的每个元素对应到单独的输入框，分两种情况处理：

编辑场景：回显已存的所有数据 #

直接循环$myroute->waypoints数组，每个元素生成一个输入框：

<!-- 先给输入框加个容器，方便后续动态添加 -->
<div id="waypoints-container">
    @foreach ($myroute->waypoints as $index => $point)
        <input 
            type="text" 
            name="waypoints[]" 
            value="{{ old('waypoints.' . $index, $point) }}"
            placeholder="途经点 {{ $index + 1 }}"
        >
    @endforeach
</div>

<!-- 加个按钮用来动态添加更多输入框 -->
<button type="button" id="add-waypoint-btn">+ 添加更多途经点</button>

这里用old('waypoints.' . $index, $point)是为了表单验证失败时，保留用户之前输入的内容，体验更好。

新增场景：生成初始输入框 #

如果是新增页面，数组是空的，你可以预设几个输入框，或者直接从空数组循环（不过空数组循环不会生成内容，所以建议预设几个）：

<div id="waypoints-container">
    {{-- 预设3个输入框，可根据需求调整数量 --}}
    @for ($i = 0; $i < 3; $i++)
        <input 
            type="text" 
            name="waypoints[]" 
            value="{{ old('waypoints.' . $i) }}"
            placeholder="途经点 {{ $i + 1 }}"
        >
    @endfor
</div>

<button type="button" id="add-waypoint-btn">+ 添加更多途经点</button>

动态添加输入框的JS逻辑 #

上面的按钮需要配合JavaScript实现动态添加，代码很简单：

document.getElementById('add-waypoint-btn').addEventListener('click', function() {
    const container = document.getElementById('waypoints-container');
    const inputCount = container.querySelectorAll('input').length;

    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.name = 'waypoints[]';
    newInput.placeholder = `途经点 ${inputCount + 1}`;
    
    container.appendChild(newInput);
});

第三步：后端处理提交的数据 #

最后在控制器的store和update方法里，直接接收数组格式的waypoints，模型会自动转成JSON存入数据库：

public function store(Request $request)
{
    // 先验证数据，根据你的需求调整规则
    $request->validate([
        'waypoints.*' => 'nullable|string|max:255',
    ]);

    // 可选：过滤掉空的输入值，避免数组里存一堆空字符串
    $waypoints = array_filter($request->input('waypoints'));

    // 创建记录，模型自动把数组转成JSON
    Route::create([
        // 其他字段...
        'waypoints' => $waypoints,
    ]);

    return redirect()->route('routes.index')->with('success', '记录创建成功');
}

public function update(Request $request, Route $myroute)
{
    $request->validate([
        'waypoints.*' => 'nullable|string|max:255',
    ]);

    $waypoints = array_filter($request->input('waypoints'));

    $myroute->update([
        // 其他字段...
        'waypoints' => $waypoints,
    ]);

    return redirect()->route('routes.index')->with('success', '记录更新成功');
}

小提示 #

• 确保数据库里的waypoints字段类型是json或text（推荐用json，MySQL支持JSON类型的查询）；
• 如果允许空数组，数据库字段要设置为允许NULL，或者存[]（Laravel会自动处理）；
• 要是需要对JSON字段做查询，Laravel也支持whereJsonContains等方法，非常方便。

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