迭代手柄中的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”，“What”，“When”和“How”，每次都忽略所有的重復。 在每次迭代之后，只有“IP”，“什么”，“何時”和“如何”是不同的。 我需要保持這些差異，而忽略其他其他重復。

我引用了類似的東西，但我認為這個人的情況有點不同。 迭代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”，“什么”，“何時”和“如何”將在文檔的下半部分“工藝”標題下看起來像這樣.http：//imgur.com/rV4PIFC

這是我正在使用的JS Fiddle： http ： //jsfiddle.net/rr9Vz/

UPDATE

我剛試過這樣的事情

  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>