如何关联两张表获取JSON数据，实现单元信息与图片分组展示

表结构 #

units表 #

id | unit_types | price
------------------------
1  | Apartment  | 100
2  | House      | 200

unit_images表 #

id | unit_id  | image_name
------------------------
1  | 1        | image1.jpg
2  | 1        | image2.jpg
3  | 2        | image3.jpg
4  | 2        | image4.jpg

期望展示效果 #

<div>
    <p>Apartment</p>
    <p>100</p>
    <p>image1.jpg</p>
    <p>image2.jpg</p>
</div>

<div>
    <p>House</p>
    <p>200</p>
    <p>image3.jpg</p>
    <p>image4.jpg</p>
</div>

当前问题 #

每个单元的div里都显示了全部4张图片，原因是后端返回的数据未按单元分组，前端也没根据单元ID匹配对应图片。

解决方案 #

第一步：修改后端API（ApiController.php） #

调整查询逻辑，直接按单元分组，把对应图片嵌套在单元数据中：

public function view()
{
    // 用查询构建器实现分组关联
    $units = DB::table('units')
        ->leftJoin('unit_images', 'units.id', '=', 'unit_images.unit_id')
        ->select('units.id', 'units.unit_types', 'units.price', 'unit_images.image_name')
        ->get()
        ->groupBy('id')
        ->map(function($group) {
            return [
                'id' => $group[0]->id,
                'unit_types' => $group[0]->unit_types,
                'price' => $group[0]->price,
                'images' => $group->pluck('image_name')->filter()->toArray()
            ];
        });

    return response()->json([
        'status' => true,
        'units' => $units,
    ]);
}

如果用Eloquent模型，可给Unit模型添加关联方法：public function images() { return $this->hasMany(UnitImage::class, 'unit_id'); }，然后直接用Unit::with('images')->get()查询

第二步：修改前端代码（index.blade.php） #

根据分组后的单元数据，遍历每个单元并渲染其对应图片：

var apiUrl = 'view';
$.ajax({
    type: "GET",
    url: apiUrl,
    success: function(response) {   
        let unitHtml = response.units.map(unit => {
            // 生成当前单元的图片HTML片段
            let imagesHtml = unit.images.map(image => `<p>${image}</p>`).join('');
            
            // 生成单元整体HTML
            return `
                <div>
                    <p>${unit.unit_types}</p>
                    <p>${unit.price}</p>
                    ${imagesHtml}
                </div>
            `;
        }).join('');
        
        unit_types_div.append(unitHtml);
    }
});

问题根源说明 #

1. 原后端代码中，$unit_types仅查询去重的单元类型，未携带单元ID、价格及关联图片；$img返回所有关联数据但未分组，导致前端无法区分图片所属单元。
2. 原前端代码遍历单元时，每次都遍历全部图片数据，未根据单元ID筛选对应图片，造成所有图片重复出现在每个div中。

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