这个plnkr演示将完成这项工作，http： //plnkr.co/edit/xlLwsoSlCzk4qsG3ZMKH？p = preview
并且，这是包含静态数据的代码，您可以进行相应的更改以对动态数据执行Ajax调用。
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var responseText = [{
"area": "CSE",
"cus": "progress",
"project": "Project 1",
"projectdes": "Class 1st"
}, {
"area": "ECE",
"cus": "complered",
"project": "Project 2",
"projectdes": "This is class 1st Project"
}, {
"area": "IT",
"cus": "progress",
"project": "project 1",
"projectdes": "This is Class 2nd project"
}, {
"area": "IT",
"cus": "pending",
"project": "Project 2",
"projectdes": "This is class 2nd project"
}];
function showData() {
var uniueTabs = getUniqueLists(responseText);
for (var i = 0; i < uniueTabs.length; i++) {
$('.nav-tabs').append('<li ><a href="#tab-content-' + i + '">' + uniueTabs[i].area + '</a></li>');
var div = '<div id="tab-content-' + i + '" class="tab-pane fade">';
for (var j = 0; j < uniueTabs[i].tabContent.length; j++) {
var obj = uniueTabs[i].tabContent[j];
div += '<p>' + obj.projectdes + '</p>';
}
$('.tab-content').append(div);
$('#tab-content-0').addClass('in active');
}
$('.nav-tabs li').eq(0).addClass('active');
setListner();
}
function getUniqueLists(responseText) {
var resArr = [];
responseText.filter(function (x, i) {
if (resArr.indexOf(x.area) === -1) {
resArr.push(x.area);
}
})
return mergeDataAreaWise(resArr, responseText);
}
function mergeDataAreaWise(area, responseText) {
var tabList = [];
for (var i = 0; i < area.length; i++) {
tabList.push({
area: area[i],
tabContent: []
});
}
for (var i = 0; i < tabList.length; i++) {
for (var j = 0; j < responseText.length; j++) {
var Obj = {
cus: responseText[j].cus,
project: responseText[j].project,
projectdes: responseText[j].projectdes
}
var currentArea = responseText[j].area;
if (tabList[i].area === currentArea) {
tabList[i].tabContent.push(Obj);
}
}
}
console.log(tabList);
return tabList;
}
function setListner () {
$(".nav-tabs a").click(function () {
$(this).tab('show');
});
}
</script>
<body onload="showData()">
<div class="container">
<ul class="nav nav-tabs">
</ul>
<div class="tab-content">
</div>
</div>
</body>
</html>
602392714
清零编程群