jQuery jSon to get sub array with multiple value

Question

I have data getting from PHP Curl jSon.

Below is the sample of jSon data.

Here is the data:

{
"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": ""
              }
            ]
          }
        ]
      }
    ]
  }
}

Now I want to get data on results -> costs -> service then get value of cost from results -> costs -> cost -> value and append it on combobox.

$.each(jsonStr['rajaongkir']['results'], function(i,n){
    cou = '<option value="'+n['costs']['description']+'">'+n['costs']['description']+'</option>';
    cou = cou + '';
    $("#service").append(cou);
});

I was trying to run aboveo code and got undefined value.

Is there any way how to get it?

Answer 1

This seems like a dynamic system and in a dynamic system it would be quite a bad idea to access it with a fixed index. There might be I missunderstood your question, but here is a solution that is quite flexible. With a quick mapping function with ES6 syntax i got to this dataset out:

[ 
 [ { service: 'Surat Kilat Khusus', cost: 16500 },
   { service: 'Express Next Day', cost: 22000 } 
 ],
 [ { service: 'OKE', cost: 18000 },
   { service: 'REG', cost: 20000 },
   { service: 'YES', cost: 30000 } 
 ],
 [ { service: 'SDS', cost: 135000 },
   { service: 'HDS', cost: 49000 },
   { service: 'ONS', cost: 26000 },
   { service: 'REG', cost: 17000 },
   { service: 'ECO', cost: 14000 } 
 ] 
]

This has a two dimensional array indecating each item. It is a combined "box". The length is dynamic and not fixed and here one could also get the dataset set to an object by the preceeding name:

[ { 'POS_Indonesia_(POS)': [ [Object], [Object] ] },
  { 'Jalur_Nugraha_Ekakurir_(JNE)': [ [Object], [Object], [Object] ] },
  { 'Citra_Van_Titipan_Kilat_(TIKI)': [ [Object], [Object], [Object], [Object], [Object] ] } ]

I also made sure to remove whitespaces from the keys and replaced them with an underscore. This way one wouldnt need to provide spaces for getting the keys again in js, skipping the whole 'string key'.

My code looks like this, but keep in mind there are more efficient ways of doing this:

I start with deconstructing the array from provided target, you must transpile with babel or some other modern transpiler to make this work. I have not checked performance, but it is very clean to look at and highly configurable to work with.

let [...costs] = somedata.rajaongkir.results;

costs.map(obj => {
 let [...costs] = obj.costs;
 return {
   [obj.name.split(' ').join('_')]: costs.map(obj => ({service:obj.service, cost: obj.cost[0].value}))
  }
});

Answer 2

由于“ costs”是一个数组，因此您希望使用以下方法通过索引访问它：

n['costs'][0]['description']