Javascript 在woocommerce签出页面中选择下拉列表的API查询

我有一个包含静态id和城市名称的API链接，而提供商没有任何文档给我

我所要求做的就是把城市的名字拉出来，放到结帐页面的下拉列表中。我在wordpress和woocommerce方面做得很好，但在处理API方面做得很好

API查询是用JSON编写的，如下所示

{
"status": true,
"message": "SUCCESSFULLY RETRIEVED AREAS",
"data": [{
    "id": 1,
    "area_id": "124",
    "area_name_en": "Auha Island",
    "area_name_ar": "جزيرة عوهة "
}, {
    "id": 2,
    "area_id": "125",
    "area_name_en": "Kubbar Island",
    "area_name_ar": "جزيرة كبر "
}, {
    "id": 3,
    "area_id": "123",
    "area_name_en": "Mischan Island",
    "area_name_ar": "جزيرة مسكان "
} }

API的链接是 我正在使用这个函数将自定义城市添加到下拉列表中

function jeroen_sormani_change_city_to_dropdown( $fields ) {

$city_args = wp_parse_args( array(
    'type' => 'select',
    'options' => array(
        'city1' => 'Amsterdam',
        'city2' => 'Rotterdam',
        'city3'  => 'Den Haag', // here i want to fill with cities from the API instead of writing them manually 
    ),
), $fields['shipping']['shipping_city'] );

$fields['shipping']['shipping_city'] = $city_args;
$fields['billing']['billing_city'] = $city_args; // Also change for billing field

return $fields;

}
add_filter( 'woocommerce_checkout_fields', 'jeroen_sormani_change_city_to_dropdown' );