bagaimana cara looping json multiple array di javascript?

ane punya struktur json seperti ini

 array:1 [▼
  0 => array:3 [▼
    "code" => "jne"
    "name" => "Jalur Nugraha Ekakurir (JNE)"
    "costs" => array:3 [▼
      0 => array:3 [▼
        "service" => "OKE"
        "description" => "Ongkos Kirim Ekonomis"
        "cost" => array:1 [▼
          0 => array:3 [▼
            "value" => 42000
            "etd" => "4-5"
            "note" => ""
          ]
        ]
      ]
      1 => array:3 [▼
        "service" => "REG"
        "description" => "Layanan Reguler"
        "cost" => array:1 [▼
          0 => array:3 [▼
            "value" => 48000
            "etd" => "2-3"
            "note" => ""
          ]
        ]
      ]
      2 => array:3 [▼
        "service" => "YES"
        "description" => "Yakin Esok Sampai"
        "cost" => array:1 [▼
          0 => array:3 [▼
            "value" => 104000
            "etd" => "1-1"
            "note" => ""
          ]
        ]
      ]
    ]
  ]
]

ane mau tampilin data "service" dan "value" di option dengan menggunakan javascript seperti ini:

 $('#kurir').change(function(){
    var kurirID = $(this).val();
    if(kurirID){
        $.ajax({
           type:"GET",
           url:"{{url('checkout/kurir')}}?kurir_id="+kurirID,
           success:function(res){
            if(res){
                $("#ongkir").prop('disabled', false);
                $("#ongkir").empty();
                $("#ongkir").append('<option>--- Pilih Kurir ---</option>');


                $.each(res,function(key,value){

                    $("#ongkir").append('<option value="'+key['service']+'">'+value.service+'</option>');

                });

            }else{

               $("#ongkir").empty();
            }
           }
        });
    }else{
         $("#ongkir").prop('disabled', true);
        $("#ongkir").empty();
        $("#ongkir").append('<option>--- Pilih Kurir ---</option>');
    }
   });

ane coba-coba hasilnya pasti undefined/kosong. Tolong bantuannya