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

Question

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

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

我希望得到以下结果：- 罗马 - 那不勒斯。 我不想重复“罗马”。

谁能帮我？ 谢谢

{
    "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

使用 vanilla 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 function。我还建议使用map和chain

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

您的示例的解决方案是：

你基本上想要遍历你 object 并从中创建一个Set以将你的citta包含在每个底层 object 中，然后你想要将这个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>