获取所有阵列的独特项目 - Handlebars

Question

使用我使用的代码，我只取得了部分成功。当所有数组的值都相等时，是否可以有一个项目？（即 "citta"："Roma"）。

现在我得到以下结果：-罗马-那不勒斯-罗马-罗马

我想要以下结果：- 罗马 - 那不勒斯。我不想重复 "Roma".

谁能帮帮我？谢谢

{
    "test": [
    {
        "33": [
        {
          "name": "Antonio",
          "citta": "Roma",
          "orari":  "2020-01-11T10:50:00.000+01:00"
      },
            {
          "name": "Federico",
          "citta": "Roma"

      }
      ]
    },
      {
        "34": [
        {
           "name": "Antonio",
          "citta": "Napoli"

      }
      ]
    },
     { "36": [
        {
           "name": "Antonio",
          "citta": "Roma"

      }
      ]
    }
  ]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div>
 {{#each test}} <ul> <li>{{#each this}}{{#eachUnique this}} - {{citta}}{{/eachUnique}}  {{/each}}</li> </ul> {{/each}} 
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>
<script>
var seasons_data_url = "working-data-file.json";
  
$(document).ready(function(){
  $.getJSON(seasons_data_url,
    function (data) {
      var mysource = $('#sourceTemplate').html();
      var mytemplate = Handlebars.compile(mysource);
      var myresult = mytemplate(data)
      $('#resultPlaceholder').html(myresult);
  });
});
  Handlebars.registerHelper('eachUnique', function(array, options) {
  // this is used for the lookup
  var  dupCheck = {};
  // template buffer
  var buffer = '';
  for( var i=0; i< array.length; i++){
    var entry = array[i];
    var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
    // check if the entry has been added already
    if(!dupCheck[uniqueKey]){
      // here there are only unique values
      dupCheck[uniqueKey] = true;
      // add this in the template
      buffer += options.fn(entry);
    }
  }
  // return the template compiled
  return buffer;
});
</script>

Answer 1

有几种方法可以实现唯一数组。

原版 JavaScript

使用香草 JavaScript 你可以使用 Set

  var foo = new Set();
  test.forEach(item => foo.add(item.citta));
  return Array.from(foo);

更好的方法是将非唯一数组本身传递给集合承包商，它将从该数组中创建唯一集合

  return Array.from(new Set(test.map(item => item.citta)));

使用Lodash.js

Lodash.js 有一个 uniq 函数。我还建议使用 map and chain

  return _.chain(test)
    .map(item => item.citta)
    .uniq()
    .value();

您的示例的解决方案是：

你基本上想要遍历你的对象并从中创建一个 Set 以将你的 citta 包含在每个基础对象中，然后，您想将此 Set 制作的 Array 添加到您的 context 并更改您的 #each 以使用该数组。

这里是使用您在评论中提供的示例解决问题的代码修改。

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div>
 {{#each cittas}} <ul> <li>{{this}}</li> </ul> {{/each}} 
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/js/autoComplete.min.js"></script>
<script>
$(document).ready(function() {
  var context = {
    "test": [
    {
        "33": [
        {
          "name": "Antonio",
          "citta": "Roma",
          "orari":  "2020-01-11T10:50:00.000+01:00"
      },
            {
          "name": "Federico",
          "citta": "Roma",
          "orari":  "2020-01-11T12:50:00.000+01:00"
      }
      ]
    },
      {
        "34": [
        {
           "name": "Antonio",
          "citta": "Napoli",
          "orari":  "2020-01-11T10:50:00.000+01:00"
      }
      ]
    },
        {
        "35": [
        {
           "name": "Antonio",
          "citta": "Roma",
          "orari":  "2020-01-11T10:50:00.000+01:00"
      }
      ]
    },
     { "36": [
        {
           "name": "Antonio",
          "citta": "Roma",
          "orari":  "2020-01-11T10:50:00.000+01:00"
      }
      ]
    }
  ]
};
context.cittas = Array.from(context.test.reduce((foo, item) => {
  Object.values(item).forEach(a => {
    a.forEach(b => {
      foo.add(b.citta);
    });
  });
  return foo;
}, new Set()))
  var source = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html = template(context);
  $("#resultPlaceholder").html(html);
});
  Handlebars.registerHelper('eachUnique', function(array, options) {
  // this is used for the lookup
  var  dupCheck = {};
  // template buffer
  var buffer = '';
  for( var i=0; i< array.length; i++){
    var entry = array[i];
    var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
    // check if the entry has been added already
    if(!dupCheck[uniqueKey]){
      // here there are only unique values
      dupCheck[uniqueKey] = true;
      // add this in the template
      buffer += options.fn(entry);
    }
  }
  // return the template compiled
  return buffer;
});

</script>

获取所有阵列的独特项目 - Handlebars

Get the unique items for all array - Handlebars

javascript

json

handlebars.js