iterate over json object duplicates in handlebars

Question

I have the following JSON Object in my javascript:

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

And I want to iterate over this object so only when it iterates over the 2nd, 3rd, and 4th object I get a different "IP", "What", "When", and "How" each time AND ignore all the duplicities. After each of the iterations only the "IP", "What", "When", and "How" are different. I need to keep these differences and ignore other other duplicates.

I referenced something like this but I think this person's situation was a little different. Iterating over a JSON-Object

Eventually this will go in a handlebars template like this

Eventually, the "IP", "What", "When", and "How" will look something like this near the bottom half of the document under the heading "Process" https://i.sstatic.net/7ivqr.jpg

Here is the JS Fiddle I'm working with: http://jsfiddle.net/rr9Vz/

UPDATE

I just tried something like this

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

And I get the array that I need, but now how do I pass my templating AND this iteration through in handlebars?

UPDATE 2

For all intents and purposes the


      Aspire Logo
      {{IG}}
      Common Core


    
      
        
          Aligned to the following AIR Indicators:
        
        
          {{AIR_Indicators}}
        
      
      
        
          Aligned to the following Standards of Mathematical Practice:
        
        
          {{SMP}}
        
      
    
      
        Purpose
      
      
        
          {{Purpose}}
        
      
    
       Process 
      
  
    
      Instructional Practice
       Problem Solving
  

      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


    
    
      Instructional Practice
       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. 


    
    
      Instructional Practice
       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. 


    
    
      Instructional Practice
       Mathematics Assessment Resources (MARS)
  

      What Story Problems. 


      When Done at the begining of the unit. 


      How After each asssessment.

I want this: http://jsfiddle.net/8Xnpk/1/

but I'm getting this: http://jsfiddle.net/rr9Vz/3/

@MarcoCl's solution works in terms of code execution, but for whatever eason I can't seem to get this http://jsfiddle.net/8Xnpk/1/

MarcoL · Accepted Answer

In order to avoid duplicates, use a dictionary instead of an array: this speed up the duplicate lookup and it won't hurt your current code.

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

As alternative you can integrate the filterDuplicates logic in a custom Handlebar helper.

Replace the {{#each this}} tag with the custom {{€#eachUnique this}} one:

Then register the new helper:

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

Update 2

The problem changed a bit from the original one - it was only about removing duplicates from a list and it became a more template-related question...

I'll leave the duplicate answer and add this other one for the second update:

Preprocess your data to remove the common data:

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

The new template will look like this one:

iterate over json object duplicates in handlebars

Answers (1)

Update 2

Related Questions