Add weather to popup content table

I have a popup content table look like this

---

var popupContent = '<table>
                    <tr>
                        <td colspan="2">' + (feature.properties['NAME_2'] !== null ? autolinker.link(feature.properties['NAME_2'].toLocaleString()) : '') + '</td>
                    </tr>
                    <tr>
                        <td colspan="2">' + (feature.properties['NAME_3'] !== null ? autolinker.link(feature.properties['NAME_3'].toLocaleString()) : '') + '</td>
                    </tr>
                    <tr>
                        <td colspan="2">' + (feature.properties['condition'] !== null ? '<b>Thời tiết</b>: ' + feature.properties['condition'] + ' ' : 'Weather data not available') + '</td>
                    </tr>
                    <tr>
                        <td colspan="2">' + (feature.properties['temperature'] !== null ? '<b>Nhiệt độ</b>: ' + feature.properties['temperature'] + '°C' : 'Temperature data not available') + '</td>
                    </tr>
                    <tr>
                        <td colspan="2">' + (feature.properties['humidity'] !== null ? '<b>Lượng mưa</b>: ' + feature.properties['humidity'] + '%' : 'Humidity data not available') + '</td>
                    </tr>
                    <tr>
                        <td colspan="2">' + (feature.properties['wind'] !== null ? '<b>Gió</b>: ' + feature.properties['wind'] + ' km/h' : 'Wind data not available') + '</td>
                    </tr>
                </table>'

---

My goal is to display the popup like this:enter image description here

But i dont know how to link the api function to the table to display the weather status so it keep being “undefined”

Im using Weather API from weatherapi.com.