迭代手柄中的json对象重复

Question

我的javascript中有以下JSON对象：

var source = $("#template").html();
var template = Handlebars.compile(source);

var igListOrig = [
  {
    "IG":"Problem Solving", 
    "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3,     3.4", 
    "SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8", 
    "Purpose": "Students must be able to reason, problem solve, communicate and make real life       decisions that require mathematical thinking.  Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)", 
    "IP":"Problem of the Week(PoW)", 
    "What": "PoWs are complex problems.",
    "When": "PoWs should be administered once per month.", 
    "How": "1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up"
  },

  {
    "IG":"Problem Solving", 
    "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",   
    "SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8",
    "Purpose": "Students must be able to reason, problem solve, communicate and make real life       decisions that require mathematical thinking.  Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",
    "IP":"Problem of the Month (POM)", 
    "What": "The POMs are divided into five levels. Students are asked to explain their solutions and reasoning in a write up.",
    "When": "Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days. ",
    "How": "Write them on a pieces of paper." 
  },

  {
    "IG":"Problem Solving", 
    "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
    "SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8", 
    "Purpose": "Students must be able to reason, problem solve, communicate and make real life       decisions that require mathematical thinking.  Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)", 
    "IP":"Formative Assessment Lesson (FAL)", 
    "What": "FALs consist of 3 parts including a pre-assessment (approximately 15 min.",
    "When": "The 3 part cycle is intended to be given approximately two-thirds the way into a unit of study.", 
    "How": "1.Pre assessment. 2.Introduce activity. 3.Students work collaboratively. 4.Whole class discussion/ presentation. 5.Post assessment." 
  },

 {
    "IG":"Problem Solving", "AIR_Indicators": "All Domain 1 Indicators* 3.1, 3.2, 3.3, 3.4",
    "SMP": "SMP 1, 2, 3, 4, 5, 6, 7, and 8", 
    "Purpose": "Students must be able to reason, problem solve, communicate and make real life       decisions that require mathematical thinking.  Teaching students problem solving skills and giving them opportunities to apply their skills is critical to developing their capacity to solve mathematical problems that arise in all our lives (e.g. starting a small business, figuring out the area of a room in order to purchase the correct amount of paint, filling out a tax return, tracking and setting goals for investments, etc.)",   
    "IP":"Mathematics Assessment Resources (MARS)", 
    "What": "Story Problems.",
    "When": "Done at the begining of the unit.", 
    "How": "After each asssessment." }

]

$('body').append(template(igListOrig));

我想迭代这个对象，所以只有当它遍历第2，第3和第4个对象时，我才会得到一个不同的“IP”，“什么”，“何时”和“如何”每次都忽略所有重复。在每次迭代之后，只有“IP”，“什么”，“何时”和“如何”是不同的。我需要保持这些差异，而忽略其他其他重复。

我引用了类似的东西，但我认为这个人的情况有点不同。 Iterating over a JSON-Object

最终会出现像这样的把手模板

<script id="template" type="text/x-handlebars-template">
<div class="container">
 {{#each this }}
    <div class='titles'>
      <div class="left">Aspire Logo</div>
      <div class="middle">{{IG}}</div>
      <div class="right">Common Core</div>
      <div class="purple"></div>
    </div>
    <div class="split">
      <div class="text">
        <p class="split-heading">
          Aligned to the following <span class="bold">AIR</span> Indicators:
        </p>
        <ul>
          <li>{{AIR_Indicators}}</li>
        </ul>
      </div>
      <div class="text">
        <p class="split-heading">
          Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
        </p>
        <ul>
          <li>{{SMP}}</li>
        </ul>
      </div>
    </div>
      <div class="purpose heading">
        <h3>Purpose</h3>
      </div>
      <div class="purpose text">
        <p>
          {{Purpose}}
        </p>
      </div>
    <div class="process heading">
      <h3> Process </h3>
    </div>

    <div class="bottom-container text">
        <div class="cube">
          <h4>Instructional Practice</h4>
          <center><h3> {{IP}} </h3> </center> </br>
          <p><span class="description">What</span> {{What}} </p></br>
          <p><span class="description">When</span> {{When}} </p></br>
          <p><span class="description">How</span> {{How}} </p></br>
        </div>
    </div>
{{/each}}
</div>
</script>

最终，“IP”，“What”，“When”和“How”将在文档的下半部分“Process”标题下看起来像这样 http://imgur.com/rV4PIFC

这是我正在使用的JS小提琴： http://jsfiddle.net/rr9Vz/

更新

我刚试过这样的事情

  var ips = [];
   for(var i in igListOrig) {
            var ip = igListOrig[i].IP + igListOrig[i].What + igListOrig[i].When +                     
            igListOrig[i].How ;
            if($.inArray(ip,ips)== -1 ){
                ips.push(ip);
            }
        }

我得到了我需要的数组，但是现在如何通过手柄传递我的模板和迭代？

更新2

对于所有意图和目的，当Handlebars编译时，<div class='bottom-container text>需要看起来像这样。

<script id="template" type="text/x-handlebars-template">
   <div class="container">
    <div class='titles'>
      <div class="left">Aspire Logo</div>
      <div class="middle">{{IG}}</div>
      <div class="right">Common Core</div>
      <div class="purple"></div>
    </div>
    <div class="split">
      <div class="text">
        <p class="split-heading">
          Aligned to the following <span class="bold">AIR</span> Indicators:
        </p>
        <ul>
          <li>{{AIR_Indicators}}</li>
        </ul>
      </div>
      <div class="text">
        <p class="split-heading">
          Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
        </p>
        <ul>
          <li>{{SMP}}</li>
        </ul>
      </div>
    </div>
      <div class="purpose heading">
        <h3>Purpose</h3>
      </div>
      <div class="purpose text">
        <p>
          {{Purpose}}
        </p>
      </div>
    <div class="process heading">
      <h3> Process </h3>
    </div>  
  <div class="bottom-container text">
    <div class="cube">
      <h4>Instructional Practice</h4>
      <center><h3> Problem Solving</h3> </center> </br>
      <p><span class="description">What</span> PoWs are complex problems. </p></br>
      <p><span class="description">When</span> PoWs should be administered once per month. </p></br>
      <p><span class="description">How</span> 1.Introduce problem, process, and rubric. 2.Students are given time in class to work on problem throughout the week. 3.Students complete write up. 4.Student peer edit write up. 5.Students revise write up</p></br>
    </div>
    <div class="cube">
      <h4>Instructional Practice</h4>
      <center><h3> Problem of the Month (POM) </h3> </center> </br>
      <p><span class="description">What</span> The POMs are divided into five levels. Students are asked to explain their solutions and reasoning in a write up. </p></br>
      <p><span class="description">When</span> Students should work on problem the first 10-15 minutes of a period for 5-7 consecutive days. </p></br>
      <p><span class="description">How</span> Write them on a pieces of paper. </p></br>
    </div>
    <div class="cube">
      <h4>Instructional Practice</h4>
      <center><h3> Formative Assessment Lesson (FAL) </h3> </center> </br>
      <p><span class="description">What</span> FALs consist of 3 parts including a pre-assessment (approximately 15 min. </p></br>
      <p><span class="description">When</span> The 3 part cycle is intended to be given approximately two-thirds the way into a unit of study. </p></br>
      <p><span class="description">How</span> 1.Pre assessment. 2.Introduce activity. 3.Students work collaboratively. 4.Whole class discussion/ presentation. 5.Post assessment. </p></br>
    </div>
    <div class="cube">
      <h4>Instructional Practice</h4>
      <center><h3> Mathematics Assessment Resources (MARS)</h3> </center> </br>
      <p><span class="description">What</span> Story Problems. </p></br>
      <p><span class="description">When</span> Done at the begining of the unit. </p></br>
      <p><span class="description">How</span> After each asssessment. </p></br>
    </div>
 </div>
</div>

我想要这个：http://jsfiddle.net/8Xnpk/1/

但我得到了这个：http://jsfiddle.net/rr9Vz/3/

@MarcoCl的解决方案在代码执行方面起作用，但无论如何，我似乎无法得到这个http://jsfiddle.net/8Xnpk/1/

Answer 1

为了避免重复，请使用字典而不是数组：这会加快重复查找速度，并且不会损害您当前的代码。

function filterDuplicates(array){
  // this will hold the new filtered dictionary
  var uniqArray  = [],
  // this is used for the lookup
      dupCheck = {};
  for( var i=0; i< array.length; i++){
    var entry = array[i];
    var uniqueKey = entry.IP + entry.What + entry.When + entry.How;
    if(!dupCheck[uniqueKey]){
      // here there are only unique values
      dupCheck[uniqueKey] = true;
      uniqArray.push(entry);
    }
  }
  return uniqArray;
}

var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [...];

$('body').append(template(filterDuplicates(igListOrig)));

作为替代方案，您可以将filterDuplicates逻辑集成到自定义Handlebar助手中。

将{{#each this}}标记替换为自定义{{€#eachUnique this}}标记：

<script id="template" type="text/x-handlebars-template">
  <div class="container">
    {{#eachUnique this}}
    ...
    {{/eachUnique}}
  </div>
</script>

然后注册新助手：

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;
});

更新2

问题与原来的问题略有不同 - 它只是关于从列表中删除重复项，它变成了一个更模板相关的问题......

我会留下重复的答案，并为第二次更新添加另一个答案：

预处理数据以删除公共数据：

var source = $("#template").html();
var template = Handlebars.compile(source);
var igListOrig = [...];

var newModel = {
  'IG': igListOrig[0].IG,
  'AIR_Indicators': igListOrig[0].AIR_Indicators,
  'SMP': igListOrig[0].SMP, 
  'Purpose':igListOrig[0].Purpose ,
  entries: igListOrig
};
$('body').append(template(newModel));

新模板将如下所示：

<script id="template" type="text/x-handlebars-template">
  <div class="container">
    <div class='titles'>
    <div class="left">Aspire Logo</div>
    <div class="middle">{{IG}}</div>
  <div class="right">Common Core</div>
  <div class="purple"></div>
</div>
<div class="split">
  <div class="text">
    <p class="split-heading">
      Aligned to the following <span class="bold">AIR</span> Indicators:
    </p>
    <ul>
      <li>{{AIR_Indicators}}</li>
    </ul>
  </div>
  <div class="text">
    <p class="split-heading">
      Aligned to the following <span class="bold">Standards of Mathematical Practice:</span>
    </p>
    <ul>
      <li>{{SMP}}</li>
    </ul>
  </div>
</div>
  <div class="purpose heading">
    <h3>Purpose</h3>
  </div>
  <div class="purpose text">
    <p>
      {{Purpose}}
    </p>
  </div>
<div class="process heading">
  <h3> Process </h3>
</div>  
<div class="bottom-container text">
// use eachUnique here instead of each to avoid duplicates
  {{eachUnique items}}
    <div class="cube">
      <h4>Instructional Practice</h4>
      <center><h3>{{IP}}</h3> </center> </br>
      <p><span class="description">What</span> {{What}} </p></br>
      <p><span class="description">When</span> {{When}}</p></br>
      <p><span class="description">How</span> {{How}}</p></br>
    </div>
  {{/eachUnique}}
 </div>
</div>
</script>