</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> Add details and clarify the problem by <a href="/posts/21257248/edit">editing this post</a>.
</p>
<p class="mb0 mt6">Closed <span title="2014-01-21 19:09:17Z" class="relativetime">6 years ago</span>.</p>
</div>
</div>
</aside>
This is my sample listview in HTML5 with grouping. I don't know what is wrong here. Grouping will take remaining categories also. Any help will be highly appreciable.
If question is not clear please let me know.
Thanks in advance
</div>
You can do that like below;
$(document).ready(function () {
loadlist();
});
var groupedData = [
{ name: "Sashimi salad", age: "12" },
{ name: "Chirashi sushi", age: "12" },
{ name: "Seaweed salad", age: "12" },
{ name: "Edamame", age: "14" },
{ name: "Miso soup", age: "14" },
{ name: "Maguro", age: "14" },
{ name: "Shake", age: "14" },
{ name: "Shiromi", age: "14" },
{ name: "Tekka maki", age: "15" },
{ name: "Hosomaki Mix", age: "15" },
{ name: "California rolls", age: "18" },
{ name: "Seattle rolls", age: "18" },
{ name: "Spicy Tuna rolls", age: "18" },
{ name: "Ebi rolls", age: "22" },
{ name: "Chicken Teriyaki", age: "22" },
{ name: "Salmon Teriyaki", age: "22" },
{ name: "Gohan", age: "22" },
{ name: "Tori Katsu", age: "41" },
{ name: "Yaki Udon", age: "41" }
];
var ages = [];
function loadlist() {
var mAge = 0;
$.ajax({
success: function (msg) {
$.each(groupedData, function(key, value) {
if($.inArray(value.age, ages) < 0){
ages.push(value.age);
}
});
var header = "";
$.each(ages, function(key, value) {
header += "<ul>" + value;
$.each(groupedData, function (i, item1) {
if (value == item1.age) {
header += "<li>" + item1.name + "</li>";
}
});
header += "</ul>";
});
$(".list").html(header);
},
error: Error
});
}
function Error(result) {
messageBox( result.status + '' + result.statusText);
}
Here is a working fiddle: http://jsfiddle.net/q5zY7/3/