Get array data loop and append it on combobox duplicate using jQuery

Question

Continuing from my previous post.

Now I would like to get the array data on loop.

{
"rajaongkir": {
    "query": {
      "origin": "23",
      "destination": "152",
      "weight": 1500,
      "courier": "all"
    },
    "status": {
      "code": 200,
      "description": "OK"
    },
    "origin_details": {
      "city_id": "23",
      "province_id": "9",
      "province": "Jawa Barat",
      "type": "Kota",
      "city_name": "Bandung",
      "postal_code": "40000"
    },
    "destination_details": {
      "city_id": "152",
      "province_id": "6",
      "province": "DKI Jakarta",
      "type": "Kota",
      "city_name": "Jakarta Pusat",
      "postal_code": "10000"
    },
    "results": [
      {
        "code": "pos",
        "name": "POS Indonesia (POS)",
        "costs": [
          {
            "service": "Surat Kilat Khusus",
            "description": "Surat Kilat Khusus",
            "cost": [
              {
                "value": 16500,
                "etd": "2-4",
                "note": ""
              }
            ]
          },
          {
            "service": "Express Next Day",
            "description": "Express Next Day",
            "cost": [
              {
                "value": 22000,
                "etd": "1",
                "note": ""
              }
            ]
          }
        ]
      },
      {
        "code": "jne",
        "name": "Jalur Nugraha Ekakurir (JNE)",
        "costs": [
          {
            "service": "OKE",
            "description": "Ongkos Kirim Ekonomis",
            "cost": [
              {
                "value": 18000,
                "etd": "2-3",
                "note": ""
              }
            ]
          },
          {
            "service": "REG",
            "description": "Layanan Reguler",
            "cost": [
              {
                "value": 20000,
                "etd": "1-2",
                "note": ""
              }
            ]
          },
          {
            "service": "YES",
            "description": "Yakin Esok Sampai",
            "cost": [
              {
                "value": 30000,
                "etd": "1-1",
                "note": ""
              }
            ]
          }
        ]
      },
      {
        "code": "tiki",
        "name": "Citra Van Titipan Kilat (TIKI)",
        "costs": [
          {
            "service": "SDS",
            "description": "Same Day Service",
            "cost": [
              {
                "value": 135000,
                "etd": "",
                "note": ""
              }
            ]
          },
          {
            "service": "HDS",
            "description": "Holiday Delivery Service",
            "cost": [
              {
                "value": 49000,
                "etd": "",
                "note": ""
              }
            ]
          },
          {
            "service": "ONS",
            "description": "Over Night Service",
            "cost": [
              {
                "value": 26000,
                "etd": "",
                "note": ""
              }
            ]
          },
          {
            "service": "REG",
            "description": "Regular Service",
            "cost": [
              {
                "value": 17000,
                "etd": "",
                "note": ""
              }
            ]
          },
          {
            "service": "ECO",
            "description": "Economi Service",
            "cost": [
              {
                "value": 14000,
                "etd": "",
                "note": ""
              }
            ]
          }
        ]
      }
    ]
  }
}

I'm trying to get the array data and append it to combobox. The result is the data display is all double/duplicate.

Here is the JS to get the array data:

$.ajax({
    type : 'POST',
    url : 'cek_ongkir.php',
    dataType: "JSON",
    data :  {'kab_id' : kab, 'kurir' : kurir, 'asal' : asal, 'berat' : berat},
    success: function (jsonStr) {
        $.each(jsonStr['rajaongkir']['results'], function(i,n)
        {
            var len = n['costs'].length;

            for(var i=0; i<len; i++)
            {
                cou = '<option value="'+n['costs'][0]['cost'][0]['value']+'">'+n['costs'][0]['description']+'</option>';
                cou = cou + '';
                $("#service").append(cou);
            }
        });

        $("#service").prop('disabled', false);
    }
});

I don't know where I need to put [i] on that loop.

Answer 1

You need i to access each object of costs array.

Replace

cou = '<option value="'+n['costs'][0]['cost'][0]['value']+'">'+n['costs'][0]['description']+'</option>';

with

cou = '<option value="'+n['costs'][i]['cost'][0]['value']+'">'+n['costs'][i]['description']+'</option>';

Since you are using n['costs'][0] inside your loop so it will always return the first object of costs array that is why your options are duplicated. To access each object of the array inside the loop you must require to use the index of the array which you get from the loop starting from 0 to length-1 of the array. Thus, you must use n['costs'][i] in your code to make it work as intended.