在handlebars页面中打印来自JSON的过滤数据

{
  "users": [
    {
      "name": "Alice",
      "age": 25,
      "gender": "Female"
    },
    {
      "name": "Bob",
      "age": 30,
      "gender": "Male"
    },
    {
      "name": "Charlie",
      "age": 35,
      "gender": "Male"
    }
  ]
}

<script id="user-template" type="text/x-handlebars-template">
  <h1>Filtered Users:</h1>
  <ul>
    {{#each users}}
      {{#if (eq gender "Male")}}
        <li>Name: {{name}}, Age: {{age}}</li>
      {{/if}}
    {{/each}}
  </ul>
</script>

<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>
<script>
  // 获取JSON数据
  var jsonData = {
    "users": [
      {
        "name": "Alice",
        "age": 25,
        "gender": "Female"
      },
      {
        "name": "Bob",
        "age": 30,
        "gender": "Male"
      },
      {
        "name": "Charlie",
        "age": 35,
        "gender": "Male"
      }
    ]
  };

  // 获取模板内容
  var template = document.getElementById("user-template").innerHTML;

  // 编译模板
  var compiledTemplate = Handlebars.compile(template);

  // 渲染数据
  var renderedHtml = compiledTemplate(jsonData);

  // 将渲染结果插入到页面中
  document.getElementById("output").innerHTML = renderedHtml;
</script>