如何在API数据为空时隐藏div卡片？

你的问题出在getRoomCard函数的判断逻辑上：当前仅检查$room数组是否为空，但getRoom函数始终返回一个包含键的数组，哪怕字段值为空，empty($room)也会返回false，所以卡片依然会被输出。要实现空数据时隐藏卡片，需要检查房间数据的核心字段是否为空，而不是数组本身。

修改方案 #

1. 先定义“空数据”的判定规则：比如当name、description、address全部为空时，视为无效数据，不渲染卡片；或者根据你的业务需求，只要某个关键字段（比如name）为空就隐藏。
2. 在getRoomCard函数中先进行有效数据判断，只有数据有效时才返回卡片HTML，否则返回空字符串。

修改后的代码 #

function getRoom($room){
    $rooms = array();
    // 请将API返回的对应字段赋值到变量，示例写法：
    // $img = $room['img'] ?? "";
    // $name = $room['name'] ?? "";
    // $description = $room['description'] ?? "";
    // $address = $room['address'] ?? "";

    $rooms['img'] = $img ?? "";
    $rooms['name'] = $name ?? "";
    $rooms['description'] = $description ?? "";
    $rooms['address'] = $address ?? "";

    return $rooms;
}


function getRoomCard($room){
    // 自定义空数据判定规则，可根据业务调整
    $isDataEmpty = empty($room['name']) && empty($room['description']) && empty($room['address']);
    
    if ($isDataEmpty) {
        // 数据为空时返回空，不渲染卡片
        return "";
    }
   
    return "
    <div class='col-md m-1'>
        <div class='card h-100'>
            <img class='card-img-top' src='{$room['img']}' alt='Card image cap' style='width:100%;height:180px;background-size: cover;'>
    
            <div class='card-body'>            
                <h3 class='card-title'>{$room['name']}</h3>
                <h5 class='card-text description'>description : {$room['description']}</h5>
                <h5 class='card-text description'>Address: {$room['address']}</h5>
            </div>
    
        </div>
    </div>
    ";  
}

额外说明 #

• 原代码里的h5标签有语法错误：<h5='card-text description'>应该改成<h5 class='card-text description'>，否则样式无法生效。
• 如果需要在所有卡片都为空时显示提示，不要在getRoomCard里单独输出，建议在调用函数的地方统一处理，示例：

$roomList = // 从API获取的房间列表数据
$cards = "";
foreach($roomList as $roomData) {
    $room = getRoom($roomData);
    $cards .= getRoomCard($room);
}

if (empty($cards)) {
    echo "No trace currently found";
} else {
    echo $cards;
}

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