Question

I have an array where there are repeated values. I need to group like elements, and when the value changes create a new “section”.

My array is something like

{section: "An Hour before Dinner", title: "Cook peas"},
{section: "An Hour before Dinner", title: "Take pie out"},
{section: "As guests arrive", title: "Mix drinks"},
{section: "Just Before Dessert", title: "Reheat at 325 about 20 minutes."},
{section: "Just Before Dessert", title: "Cut and serve."},

I will need to do something like

An Hour Before Dinner
  Cook peas
  Take pie out
As guests arrive
  Mix Drinks
Just before dessert
  Reheat at 325 about 20 minutes.
  Cut and serve.

Due to the fact that sometimes my array might have fewer or more elements, I need to loop it, and when the value changes create a new heading with the new value and then loop through the elements until the next different item comes up and create the next heading etc.

Answer 1

This should do the trick:

var arr = [
    {section:"An Hour before Dinner", title:"Cook peas"},
    {section:"An Hour before Dinner", title:"Take pie out"},
    {section:"As guests arrive", title:"Mix drinks"},
    {section:"Just Before Dessert", title:"Reheat at 325 about 20 minutes."},
    {section:"Just Before Dessert", title:"Cut and serve."}
];
var s = null;

var html = "";
for (var i = 0, l = arr.length; i<l; i++) {
    var r = arr[i];
    if (r.section != s) {
        // New section
        s = r.section;
        html += "<h1>"+s+"</h1>"
    } else {
        // Continue old section
    }
    html += "<p>"+r.title+"</p>";
}

var div = document.createElement('div');
div.innerHTML = html;
document.body.appendChild(div);