时间戳

首页 > 解决方案 > 循环遍历对象并打印子节点

javascript - 循环遍历对象并打印子节点

问题描述

我有以下对象，如果用户在法语站点 (/fr) 上，则显示法语 (fr) 标题。为了实现这一点，我试图遍历对象。

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>

标签： javascriptjsonloops

解决方案

看看这张地图

如果你使用 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>

推荐阅读