Retrieve data from 3rd party website by ajax in laravel

Question

I have ajax in my cart page where i get destination info of the user and return shipping options to them in order to calculate their shipping cost.

So far everything works except I'm not sure how to loop returned data from my 3rd party website.

Here is what I need:

I need Loop trough this data and get marked information in drop-down.

Red: as my option group.

Orange - Green - Purple: as my option. LIKE:

OKE - 48.000 - 5-7 Days

network result

console result

Codes

This is my ajax code for that:

<script>
  jQuery( document ).ready( function( $ ) {
    $('body').on('change', 'select[name="city"]', function(e){
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });

       var cityID = $(this).val();
       var weight = ["{{$totalWeight}}"];
        if(cityID) {
            $.ajax({
              url: '{{ url('rajaajax') }}/'+weight+'/'+encodeURI(cityID),
              type: "GET",
              dataType: "json",
              success:function(data) {
                // $('#des').empty();
                // $('#des').append(
                //   '<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
                //   );
                $.each(data.data, function(key, value) {
                  console.log(value);
                });
              }
            });
        }else{
          $('select[name="postchoose"]').empty().append("<option value='' selected>Select</option>");
        }
    });
  });
</script>

Thanks.

Answer 1

SOLVED

I retrieved my data with code below:

    <script>
  jQuery( document ).ready( function( $ ) {
    $('body').on('change', 'select[name="city"]', function(e){
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });

       var cityID = $(this).val();
       var weight = ["{{$totalWeight}}"];
        if(cityID) {
            $.ajax({
              url: '{{ url('rajaajax') }}/'+weight+'/'+encodeURI(cityID),
              type: "GET",
              dataType: "json",
              success:function(data) {
                $('#des').empty();
                $('#des').append(
                  '<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
                  );
                $.each(data.data, function(key, value) {
                  $.each(value.costs, function(key2, value2) {
                    $.each(value2.cost, function(key3, value3) {

                      // number format
                      var number = value3['value'];
                      var nf = new Intl.NumberFormat('en-US', {
                          maximumFractionDigits:0, 
                          minimumFractionDigits:0
                      });
                      var formattedNumber = nf.format(number);
                      // number format
                      $('select[name="postchoose"]').append('<optgroup label="' + value['code'] + '" /><option id="postchoose" class="form-control" value="'+ value['code'] +'">'+ value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] +'</option></optgroup>');

                      // console.log(value);
                      // alert(value.code); // jne-pos
                      // alert(value2.service); //oke -reg
                      // alert(value3.value); // 43000 - etd 24 jam
                    });
                  });

                });
              }
            });
        }else{
          $('select[name="postchoose"]').empty().append("<option value='' selected>Select</option>");
        }
    });
  });
</script>

there is only 1 issue i'm facing I would like to be done and that's grouping results with <optgroup> as you see in my screenshot below my <optgroup> in looping for each one of my options.

How can I fix this?