Цикл по объекту и печать дочерних узлов

Question

У меня есть следующий объект, и если пользователь находится на французском сайте (/ fr), то показывает французские (fr) заголовки. Чтобы добиться этого, я пытаюсь провести l oop через объект.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="department"></select>

Выше приведен следующий журнал консоли:

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

И моя разметка select выглядит следующим образом:

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

В то время как я после:

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

Answer 1

Посмотрите на эту карту

Если вы используете Object.entries, вам нужно entry[1][0][lang]

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"
  }]
}
lang = "fr"; // from location
$(".department").append(
  Object.keys(departments)
    .map(key => { 
      const opt = departments[key][0][lang]; 
      return `<option value="${opt}">${opt}</option>` 
    })
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="department">
<option value="">Please select</option>
</select>