Laravel中如何在JSON响应中返回多个参数并在前端正确解析？

问题根源 #

1. 后端返回无键的索引数组，两个结构完全不同的数据集混在一起，前端无法准确区分字段所属的数据集
2. 前端用$.each遍历整个返回数组，尝试从每个元素中同时取pending_amount和price两个字段，但实际上第一个元素只有party相关字段，第二个只有tariff相关字段，必然有一个字段取不到值

后端修改方案 #

将返回值改为带明确键名的关联数组，同时优化冗余代码，避免空数据报错：

public function getParty($party_id){
    // 按party_id查询一般为单条数据，用first()直接取对象，无需遍历集合
    $party_info = Credits::where('party_id',$party_id)->first();
    // 增加空数据判断避免报错
    if(empty($party_info)) {
        return response()->json(['code' => 404, 'msg' => '数据不存在']);
    }
    $tariff_type = $party_info->vehicle_type;
    $tariff = Tariff::where('nozzel_type',$tariff_type)->first();
    
    // 用关联数组返回，键名明确对应两类数据
    return response()->json([
        'party_info' => $party_info,
        'tariff' => $tariff
    ]);
}

如果你确实需要返回多条party_info数据，可保留get()方法，但查询tariff的逻辑需要对应调整，避免只取最后一条的vehicle_type匹配

前端修改方案 #

无需遍历返回结果，直接通过键名取对应字段即可：

if(data && data.party_info && data.tariff){
    const p_amount = data.party_info.pending_amount;
    const new_tariff = data.tariff.price;
    document.getElementById('current_amount').value = new_tariff;
    document.getElementById('pending_amount').value = p_amount;
}

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