JavaScript for-in loop with dynamic property names

Question

I want to loop though all values under services_raw_nl and get the name and number belonging to thoses values, e.g. In-house Catering and 9 and Live music and 6

I want to use a for-in loop, but I have 2 problems:

1. the problem is that the name of services_raw_nl may also be services_raw_en (depending on the chosen language of the user).
2. I'm unsure how to access the properties and their values. Basically I just want to get the name and value of a property under services_raw_nl by their index.

I wanted to make this available as a JSFiddle, but don't know how to make the JSON data available there and since this service is not yet live I can not call it from JSFiddle.

{
  "responseHeader":{
    "status":0,
    "QTime":1,
    "params":{
      "facet":"true",
      "sort":"membervalue desc",
      "fl":"id,city,thumb",
      "facet.mincount":"1",
      "indent":"on",
      "start":"0",
      "q":["*:*",
        "*:*"],
      "facet.field":["country_raw_nl",
        "services_raw_nl",
        "city"],
      "wt":"json",
      "fq":"country_nl:=australie",
      "rows":"12"}},
  "response":{"numFound":10,"start":0,"docs":[
      {
        "id":"842",
        "city":"whitsundays",
        "thumb":"735_739_CEREMONY-PAVILLION-2.jpg"}]
  },
  "facet_counts":{
    "facet_queries":{},
    "facet_fields":{
      "country_raw_nl":[
        "Australie",10],
      "services_raw_nl":[
        "In-house Catering",9,
        "Live music",6],
      "partylocation":[
        "true",8,
        "false",2],
      "hasphoto":[
        "true",9,
        "false",1],
      "hasvideo":[
        "false",10],
      "rating":[
        "0.0",10],
      "rating_rounded":[
        "0.0",10],
    "facet_dates":{},
    "facet_ranges":{}}}

Here's the loop I'm trying:

for (var service in response.facet_counts.facet_fields.services_raw_nl) {
    console.log(response.facet_counts.facet_fields.services_raw_nl[service].???);
}

Answer 1

You can cache service_raw_nl/en to a variable, and use a simple for loop:

var lang = 'nl', // or 'en', this you probably have stored somewhere in your preceding code?
    services_raw = response.facet_counts.facet_fields['services_raw_' + lang],
    n;
for (n = 0; n < services_raw.length; n++) {
    console.log(services_raw[n]);
}

---

EDIT

This function returns you an object containig the wanted values.

var lang = 'nl';
function getServices (response, lang) {
    var services_raw = response.facet_counts.facet_fields['services_raw_' + lang],
        n, temp = {};
    for (n = 0; n < services_raw.length; n+= 2) {
        temp[services_raw[n]] = services_raw[n + 1];
    }
    return temp;
}
console.log(getServices(response, lang));

A live demo at jsFiddle.

---

EDIT II

A simple way to create some HTML from the values of services_raw_nl would be something like this:

var lang = 'nl',
    services_raw = response.facet_counts.facet_fields['services_raw_' + lang],
    n, outer, inner;
for (n = 0; n < services_raw.length; n += 2) {
    outer = document.createElement('span');
    outer.appendChild(document.createTextNode(services_raw[n]));
    inner = outer.appendChild(document.createElement('span'));
    inner.appendChild(document.createTextNode(services_raw[n + 1]));
    what_ever_element.appendChild(outer);
}