PHP call not returning API data

Question

I'm using this link to obtain Air Quality data from an API https://api-ninjas.com/api/airquality

I want to do this via PHP due to it being a requirement

I have my PHP file

<?php

// Display errors is set to on and should be removed for production
    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

// Timing script execution
    $executionStartTime = microtime(true);


    $url='https://api.api-ninjas.com/v1/airquality?city=' . $_REQUEST['countryName'];
// Curl object is initiated
    $ch = curl_init();
    
//Curl_setopt() takes three parameters(Curl instance to use, setting you want to change, value you want to use for that setting)    
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_URL, $url);

    $result=curl_exec($ch);

    curl_close($ch);

    $decode = json_decode($result, true);   

    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "success";
    $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
    $output['result'] = $decode['result'];

    
    header('Content-Type: application/json; charset=UTF-8');

    echo json_encode($output); 

?>

and then my JavaScript Function

function getAirQuality(countryName) {
    $.ajax({
        method: 'GET',
        url: "assets/php/getAirQuality.php",
        data: {
               countryName: countryName
                },
        headers: {
            'X-Api-Key': 'API_KEY'
        },
        contentType: 'application/json',
        success: function(result) {
            console.log(result);

            $('#aqCO').html(result['CO']['concentration'] + ' ppm');
            $('#aqSO').html(result['SO2']['concentration'] + ' ppm');
            $('#aqO3').html(result['O3']['concentration'] + ' g/m3');
            $('#aqNO2').html(result['NO2']['concentration'] + ' ppm');
            $('#aqPM2').html(result['PM2.5']['concentration'] + ' µg/m3');
            $('#aqPM10').html(result['PM10']['concentration'] + ' µg/m3');
        },

        error: function ajaxError(jqXHR) {
            console.error('Error: ', jqXHR.responseText);
        }
    });
}

However, the PHP file keeps complaining in the console Error: <br /> <b>Warning</b>: Undefined array key "result" in <b>C:\xampp1\htdocs\project1\assets\php\getAirQuality.php</b> on line <b>30</b><br /> {"status":{"code":"200","name":"ok","description":"success","returnedIn":"293 ms"},"result":null}

As you can see from the above website, the result should be like so

{
  "CO": {
    "concentration": 223.64,
    "aqi": 2
  },
  "NO2": {
    "concentration": 9.08,
    "aqi": 11
  },
  "O3": {
    "concentration": 26.46,
    "aqi": 22
  },
  "SO2": {
    "concentration": 0.78,
    "aqi": 1
  },
  "PM2.5": {
    "concentration": 4.04,
    "aqi": 13
  },
  "PM10": {
    "concentration": 6.23,
    "aqi": 5
  },
  "overall_aqi": 22
}

I'm not sure what else it could be? I've tried result, results and data

UPDATE So whilst I've got the data decoded fine

result
: 
CO
: 
{concentration: 223.64, aqi: 2}
NO2
: 
{concentration: 19.71, aqi: 24}
O3
: 
{concentration: 52.93, aqi: 44}
PM2.5
: 
{concentration: 11.67, aqi: 37}
PM10
: 
{concentration: 14.61, aqi: 13}
SO2
: 
{concentration: 1.97, aqi: 2}
overall_aqi
: 
44

I am trying to assign them to variable like so: $('#aqCO').html(result['CO']['concentration'] + ' ppm'); but it is returning Uncaught TypeError: Cannot read properties of undefined (reading 'concentration')

Answer 1

You can pass headers by creating an array and passing it via: CURLOPT_HTTPHEADER

$headers = ['X-Api-Key: API_KEY'];

curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);