Laravel项目中编辑模态框无法显示文章元信息问题

我正在练习一个基于Laravel、AJAX和jQuery的简单项目，尝试编辑文章及其之前添加的元信息。通过console.log可以看到包含元信息的文章数据，文章数据来自posts表，元信息来自设置了post_id外键的post_metas表。文章数据能正常显示在编辑模态框中，但元信息无法填充到模态框的对应字段。

相关代码 #

PostController.php #

public function edit($id)
{
    $post = Post::with('meta')->find($id);
    if ($post) {
        return response()->json([
            'status' => 200,
            'post' => $post,
        ]);
    } else {
        return response()->json([
            'status' => 404,
            'message' => 'Post Not Found',
        ]);
    }
}

Index.blade.php的jQuery AJAX代码 #

$(document).on('click', '.edit_post_btn', function(e) {
 e.preventDefault();
 var post_id = $(this).val();
 var route_url = "{{ route('blog.edit', ':id') }}";
 route_url = route_url.replace(':id', post_id);
  $.ajax({
    type: "GET",
    url: route_url,
    success: function(response) {
     if (response.status === 200) {
       console.log(response.post);
       $('#edit_title').val(response.post.title);
       $('#edit_excerpt').val(response.post.excerpt);
       $('#edit_content').val(response.post.content);
       $('#edit_min_to_read').val(response.post.min_to_read);
       $('#edit_meta_description').val(response.post.meta_description);
       $('#edit_meta_keywords').val(response.post.meta_keywords);
       $('#edit_meta_robots').val(response.post.meta_robots);
     } else {
       console.log(response.message);
     }
   }
  });
});

路由信息 #

Route::get('/edit/{id}', [PostController::class, 'edit'])->name('blog.edit');

控制台输出截图 #

问题出在元信息的获取路径错误：
你在控制器中通过with('meta')关联查询，返回的元信息嵌套在post对象的meta属性下，而非直接在post根层级。当前代码直接调用response.post.meta_description自然无法获取到值。

具体修正方案 #

根据截图显示，meta是单个对象，包含meta_description等字段，直接修改AJAX代码中的元信息赋值部分即可：

// 替换原有的元信息赋值代码
$('#edit_meta_description').val(response.post.meta?.meta_description || '');
$('#edit_meta_keywords').val(response.post.meta?.meta_keywords || '');
$('#edit_meta_robots').val(response.post.meta?.meta_robots || '');

• 使用?.可选链操作符可以避免当meta不存在时抛出错误，同时用|| ''设置默认空值，保证字段不会显示undefined。

如果你的Post模型和PostMeta模型是一对多关联（一篇文章对应多条元数据），则需要遍历meta数组匹配字段，示例代码如下：

response.post.meta.forEach(item => {
    switch(item.key) {
        case 'meta_description':
            $('#edit_meta_description').val(item.value);
            break;
        case 'meta_keywords':
            $('#edit_meta_keywords').val(item.value);
            break;
        case 'meta_robots':
            $('#edit_meta_robots').val(item.value);
            break;
    }
});

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