Question

我正在尝试使用代码来动态显示Json数据中的标签和标签内容

<script>
var area, cus, project, curst;

$.ajax({
type: "POST",
url: "./QuizServlet",
success: function(responseText) {
    console.log("rs" + responseText.toString());
    var jsonData = JSON.parse(responseText);
    var questions = new Array();
    for (var i = 0; i < jsonData.length; i++) {
        area = jsonData[i].area;
        console.log("area" + area);
        project = jsonData[i].projectName;
        console.log("poj" + project);
        projectdes = jsonData[i].projectDescription;
        console.log("pojdes" + projectdes);
        curst = jsonData[i].currentStatus;
        console.log("cus" + curst);
        var test = {
            area: area,
            cus: curst,
            project: project,
            projectdes: projectdes,
        }
        questions.push(test);
        console.log("output" + test);
        alert(JSON.stringify(test));

    }
}
});

 for (var i in test) {
 $('.nav-tabs').append('<li role="area" class=""><a href="#' + i + '"       aria-controls="' + i + '" role="tab" data-toggle="tab">' + i + '</a></li>');

var div = '<div role="tabpanel" class="tab-pane" area="' + i + '">';

for (var j = 0; j < data[i].length; j++) {
    var obj = data[i][j];

    div += '<div area="' + obj.project + '">' + obj.projectdes + '</div>';
 }

$('.tab-content').append(div);
}

$('.nav-tabs li').eq(0).addClass('active');
$('.tab-content div').eq(0).addClass('active');
</script>



<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist"></ul>
<div class="tab-content"></div>
</div>
 </body>

我的Json数据来自DB的JSON格式正确：下面的数据来自DB。我使用警告声明打印

 {"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"}

我正在尝试在标签页和选项卡内容中的其他字段中显示区域。但是数据没有在jsp中显示。我尝试了很多方法。但是数据还没有进入标签和标签内容。请让我知道我哪里出错了。

Answer 1

我更新了答案，您可以使用以下代码替换<script>标记的部分内容。为了让UI感觉更好，可以根据引导程序等UI框架修改HTML和DOM部分。

<script>
    $.ajax({
        type: "POST",
        url: "./QuizServlet",
        success: function (responseText) {
            var jsonData = JSON.parse(responseText);
            var uniueTabs = getUniqueLists(jsonData);
            for (var i = 0; i < uniueTabs.length; i++) {
                $('.nav-tabs').append('<li role="area" class="my-li' + i + '"><a href="#' + i +
                    '"       aria-controls="' + i + '" role="tab" data-toggle="tab">' + uniueTabs[i].area +
                    '</a></li>');

                var div = '<div role="tabpanel" class="tab-pane" area="' + i + '">';

                for (var j = 0; j < uniueTabs[i].tabContent.length; j++) {
                    var obj = uniueTabs[i].tabContent[j];

                    div += '<div area="' + obj.project + '">' + obj.projectdes + '</div>';
                }

                $('.my-li' + i).append(div);
            }

            $('.nav-tabs li').eq(0).addClass('active');
            $('.tab-content div').eq(0).addClass('active');

        }
    });

    function getUniqueLists(responseText) {
        var resArr = [];
        responseText.filter(function (x, i) {
            if (resArr.indexOf(x.area) === -1) {
                resArr.push(x.area);
            }
        })
        //console.log(resArr);
        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;
    }
</script>

Here is a similar plunkr example

使用Javascript将Json数据显示到动态选项卡时遇到问题

1 个答案: