TypeError:无法读取未定义的空气质量API属性

Question

当用户搜索一个城市时，我使用空气质量指数API来获取空气质量，下面是我所得到的错误的相关代码：

function retrieveAirQuality(topResultUrl) {
    var airQualityAPIUrl = "http://api.waqi.info/feed/"+topResultUrl+"/?token="+airQualityAPIToken;

    fetch(airQualityAPIUrl)
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        if(data.status === "ok") {
            // Saves air quality results to variable
            var airQualityResult = {
                aqi: data.data.aqi,
                name: data.data.city.name,
                iaqi: data.data.iaqi,
                date: data.data.time
            }

            renderAirQuality(airQualityResult);
        }
    })
}

function renderAirQuality(airQuality) {
    stationNameEl.textContent = "Station Name: " + airQuality.name + " on " + airQuality.date.s;

    var aqi = document.createElement("tr");
    aqi.innerHTML = "<th>Air Quality Index</th><td>"+airQuality.aqi+"</td>"
    airQualityTableCellEl.appendChild(aqi);

    var humidity = document.createElement("tr");
    humidity.innerHTML = "<th>Humidity</th><td>"+airQuality.iaqi.h.v+"</td>"
    airQualityTableCellEl.appendChild(humidity);

    var oz = document.createElement("tr");
    oz.innerHTML = "<th>Ozone</th><td>"+airQuality.iaqi.o3.v+"</td>" //Error here
    airQualityTableCellEl.appendChild(oz);

    var pressure = document.createElement("tr");
    pressure.innerHTML = "<th>Atmospheric Pressure</th><td>"+airQuality.iaqi.p.v+"</td>"
    airQualityTableCellEl.appendChild(pressure);

    var pm25 = document.createElement("tr");
    pm25.innerHTML = "<th>PM2.5</th><td>"+airQuality.iaqi.pm25.v+"</td>"
    airQualityTableCellEl.appendChild(pm25);

    var co = document.createElement("tr");
    co.innerHTML = "<th>Carbon Monoxide</th><td>"+airQuality.iaqi.co.v+"</td>"
    airQualityTableCellEl.appendChild(co);
}

问题是，有些城市没有我想要添加到我的网站上的所有变量。例如，有许多城市没有从API中获得臭氧水平，因此我将在上面所述的行中得到"Uncaught (in promise) TypeError:无法读取未定义的属性(读取'v')“错误。不知道如何解决这个问题

Answer 1

对这一问题有许多不同的解决办法：

如果您想使用空的td保留一个tr，那么请使用以下命令：

var oz = document.createElement("tr");  
oz.innerHTML = "<th>Ozone</th><td>"+airQuality?.iaqi?.o3?.v+"</td>";  
airQualityTableCellEl.appendChild(oz); 

如果在参数不存在的情况下根本不想添加tr，那么执行如下操作：

var oz = document.createElement("tr");
oz.innerHTML = "<th>Ozone</th><td>"+airQuality?.iaqi?.o3?.v+"</td>";
(airQuality?.iaqi?.o3?.v) && airQualityTableCellEl.appendChild(oz);

甚至您也可以使用if条件实现第二个条件，如：if(airQuality?.iaqi?.o3?.v)

希望这能有所帮助！