PHP调用AirQuality API无返回数据及前端取值报错问题求助

第一步：修正PHP端"Undefined array key 'result'"警告 #

api-ninjas的空气质量接口返回的JSON结构没有result这个顶层键，直接是以污染物名称为键的对象。之前的PHP代码错误尝试访问$data['result']，才触发警告。

正确的PHP处理示例：

<?php
header('Content-Type: application/json');
$api_key = '你的API密钥';
$city = '北京'; // 可通过GET/POST参数动态传递

$url = "https://api-ninjas.com/api/airquality?city=" . urlencode($city);
$options = [
    'http' => [
        'header' => "X-Api-Key: $api_key\r\n"
    ]
];
$context = stream_context_create($options);
$response = file_get_contents($url, false, $context);

if ($response === false) {
    echo json_encode(['error' => '请求API失败']);
    exit;
}

$data = json_decode($response, true);

// 处理API返回的错误（比如密钥无效、城市不存在）
if (isset($data['error'])) {
    echo json_encode(['error' => $data['error']]);
    exit;
}

// 直接返回解码后的原始数据
echo json_encode($data);
?>

第二步：解决前端"Cannot read properties of undefined (reading 'concentration')"错误 #

这个错误说明result['CO']为undefined，按以下步骤排查：

1. 确认PHP返回的JSON结构 #

打开浏览器开发者工具的网络面板，查看PHP接口的返回内容，确保格式类似：

{
  "CO": {"concentration": 0.4, "aqi": 1},
  "PM2.5": {"concentration": 8, "aqi": 2},
  "O3": {"concentration": 30, "aqi": 1}
}

如果返回错误信息，优先处理错误分支。

2. 修正前端请求与解析逻辑 #

确保前端正确接收JSON并处理异常：

function getAirQuality() {
    $.ajax({
        url: '你的PHP文件路径.php',
        method: 'GET',
        dataType: 'json',
        success: function(data) {
            // 先处理API错误
            if (data.error) {
                alert('获取数据失败：' + data.error);
                return;
            }
            // 确认CO字段存在再访问
            if (data.CO && typeof data.CO.concentration !== 'undefined') {
                $('#aqCO').html(data.CO.concentration + ' ppm');
            } else {
                $('#aqCO').html('数据缺失');
            }
        },
        error: function(xhr, status, error) {
            alert('请求失败：' + error);
        }
    });
}

3. 检查键名大小写 #

API返回的污染物键名是大写格式（如CO、PM2.5），前端代码不要写成小写（如co），否则会找不到对应字段。

4. 处理跨域问题（若存在） #

如果前端页面与PHP文件不在同一域名，需在PHP开头添加跨域头：

header('Access-Control-Allow-Origin: *'); // 生产环境建议指定具体域名

额外注意事项 #

• 确认API密钥有效，且未超过api-ninjas的免费调用额度。
• 传递城市参数时必须做URL编码，避免特殊字符导致请求失败。

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