Looping through JSON and printing child nodes : I have the following JSON:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var departments = {
      "Department-1": [{
        "fr": "Dept 1 - French",
        "en": "Dept 1"
      }],
      "Department-2": [{
        "fr": "Dept 2 - French",
        "en": "Dept 2"
      }],
      "Department-3": [{
        "fr": "Dept 3 - French",
        "en": "Dept 3"
      }]
    }

<!-- end snippet -->

What I'm trying to do is, if the user is on the French site (/fr), then show the French (fr) headers. To achieve this, I'm trying to loop through the object.

Here's what I have tried to far:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    if (window.location.href.indexOf("fr") > -1) {
      for (var key in departments) {
        if (departments.hasOwnProperty(key)) {
          console.log(key + " -> " + departments[key]);
          $(".department").append('<option value="' + key + '">' + key + '</option>');
        }
      }
    }

<!-- end snippet -->

The above has the following console log:

    Department-1 -> [object Object]
    Department-2 -> [object Object]
    Department-3 -> [object Object]

And my `select` markup looks like this:

    <select class="department" name="department" id="department">
      <option>Department-1</option>
      <option>Department-2</option>
      <option>Department-3</option>
    </select>

Whereas I'm after:

    <select class="department" name="department" id="department">
      <option>Dept 1 - French</option>
      <option>Dept 2 - French</option>
      <option>Dept 3 - French</option>
    </select>

