这个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 + '" >'; 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 > <ul > </ul> <div > </div> </div></body></html>
