javascript - 如何根据我的 JSON 数据动态创建 HTML DOM？

Question

我有 Accordion

点击查看报告，它会展开

此 Accordion 、表格和饼图上的所有数据都来 self 的 JSON Ajax 调用的 1 个对象。

如果我有 3、5 或 10 个对象，我想动态创建 Accordion 。

我该怎么做？

HTML

<br><br>

<div class="row student-accordion ">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="row panel-heading">

         <div class="col-xs-1 col-sm-1 sa-section" >

           <span class="sa-h5" id="as-report-type-car"></span> <br>
           <span class="sa-h1"  id="as-section-num" class="section-num"></span><br>
           <span class="sa-h5" id="as-report-type-cdr"></span>

           <!-- <span class="as-cb-div"><span id="as-section-num"></span></span> -->

         </div>


         <!-- Title -->
         <div class="col-xs-6 col-sm-6 col-lg-6">
           <span class="sa-h3" id="as-report-type-title" >
             <span id="as-section-num"></span>
           </span>
           <br>
           <span class="sa-h5" id="as-assignment" ></span> <br>
           <span class="sa-h4" id="as-date"></span>
         </div>


         <!-- Answers -->
         <div class="sa-right-items text-center">
           <span class="sa-answer"><br>
            <span> <span class="sa-h2">
              <span id="as-correct-num" ></span>/<span id="as-correct-total-num"></span>
            </span> <br> <span class="sa-h6">ITEMS ANSWERED <br> CORRECTLY</span> </span>
          </span>


          <!-- Score -->
          <span class="sa-score">
              <span class="sa-h2" id="as-avgscore"></span>% <br>
              <span class="sa-h6">SCORE</span>
          </span>


          <!-- Review -->
          <span class="sa-review">
            <img width="40px" src="/BIM/resources/images/icons-report/review_white.png"><br>
            <span> <span class="sa-h6">REVIEW</span> </span>
          </span>


          <!-- Report -->
          <span class="sa-report" data-toggle="collapse" data-parent="#accordion" href="#as-collapse-1" aria-expanded="true"  class="pull-right">
            <img class="sa-report-btn" width="35px" src="/BIM/resources/images/icons-report/report_white.png"><br>
            <span><span id="view-report-btn" class="sa-h6 sa-report-btn">VIEW REPORT</span></span>
          </span>


          <!-- Hide -->

          <span class="sa-hide hidden"  data-toggle="collapse" data-parent="#accordion" href="#sa-collapse" aria-expanded="false"  class="pull-right">
            <img class="sa-hide-btn" width="35px" src="/BIM/resources/images/icons-report/hidedetails_white.png"><br>
            <span><span class="sa-h6 sa-hide-btn">HIDE DETAILS</span></span>
          </span>

        </div>
      </div>


    </div>
    <div id="as-collapse-1" class="panel-collapse collapse">
      <div class="panel-body">

       <!-- percent-item -->
       <%@ include file="../../components/teacher/percent-item.jsp" %>

       <div class="report-grid-area"></div>

     </div>
   </div>
 </div>
</div>
</div>

CSS

.student-accordion .panel {
  border-radius: 0px !important;
  box-shadow: none;
  margin-left: 25px;
  margin-right: 25px;
}
.student-accordion .panel-heading {
  height: 110px;
  background-color: #4D8FCB;
  border-radius: 0px;
  color: white;
  padding: 10px 0px;
}
.student-accordion .panel-body {
  background-color: white;
}
.student-accordion .panel-group .panel-heading + .panel-collapse > .panel-body,
.student-accordion .panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: none;
}
.student-accordion .sa-h1 {
  color: white;
  font-size: 39px;
  font-weight: bold;
  font-style: normal;
  font-family: "adelle-sans", sans-serif;
  text-align: center;
}
.student-accordion .sa-h2 {
  font-size: 28px;
  padding-left: 3px;
  font-family: "adelle-sans", sans-serif;
  font-style: normal;
}
.student-accordion .sa-h3 {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: bold;
  font-family: "adelle-sans", sans-serif;
  font-style: normal;
}
.student-accordion .sa-h4 {
  font-size: 14px;
  font-family: "adelle-sans", sans-serif;
  font-weight: normal;
  font-style: normal;
}
.student-accordion .sa-h5 {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: "adelle-sans", sans-serif;
  font-style: normal;
}
.student-accordion .sa-h6 {
  font-size: 10px;
  font-family: "adelle-sans", sans-serif;
  font-weight: bold;
  font-style: normal;
}
.student-accordion .sa-right-items {
  float: left;
  margin: -20px 0px;
}
.student-accordion .sa-answer,
.student-accordion .sa-score,
.student-accordion .sa-review,
.student-accordion .sa-report,
.student-accordion .sa-hide {
  vertical-align: middle;
  display: inline-block;
  padding: 0px 22px;
}
.student-accordion .sa-report,
.student-accordion .sa-hide {
  cursor: pointer;
}
.student-accordion .sa-hide-btn,
.student-accordion .sa-report-btn {
  cursor: pointer;
}
.student-accordion .sa-section {
  text-align: center;
}
.student-accordion .sa-section:after {
  content: "";
  border-right: 2px solid white;
  display: block;
  width: 1px;
  position: absolute;
  left: 96px;
  top: -10px;
  height: 110px;
  overflow: hidden;
}

JS

'use strict';

define(['jquery', 'moment'], function($, moment) {

    $(function() {

        // Teacher Report
        var report_type_car   = $('#as-report-type-car');
        var report_type_cdr   = $('#as-report-type-cdr');
        var report_type_title = $('#as-report-type-title');

        var section_num       = $('#as-section-num');
        var problem_set       = $('#as-problem-set');
        var start_time        = $('#as-start-time');
        var due_time          = $('#as-due-time');
        var submit_am         = $('#as-submit-am');
        var submit_total      = $('#as-submit-total');
        var avg_score         = $('#as-avgscore');
        var danger            = $('.pc-danger');
        var warning           = $('.pc-warning');
        var success           = $('.pc-success');
        var danger_list       = $('.pc-danger-list');
        var warning_list      = $('.pc-warning-list');
        var success_list      = $('.pc-success-list');
        var student_am        = $('#as-student-am');
        var student_total     = $('#as-student-total');

        // Student Accordion
        var assignment        = $('#as-assignment');
        var date              = $('#as-date');
        var correct_num       = $('#as-correct-num');
        var correct_total_num = $('#as-correct-total-num');

        // Assignment SUmmary
        var students_div      = $('.as-students-div');
        var student_div       = $('.as-student-div');

        // Student Report
        var student_name      = $('#as-student-name');

        //SE Report Nav
        var btn_ap            = $('#btn-ap');
        var btn_rmd           = $('#btn-rmd');

        // Percent Piechart
        var percent_item      = $('.percent-item');
        var percent_skill     = $('.percent-skill');


        // Set this temporary until the BE for it is ready
        var beTeacherNotDone  = ['student', 'standard'];
        var beStudentNotDone  = ['section-exercise', 'course-benchmark', 'chapter-quiz', 'chapter-test', 'practice-test'];


        function getReportTitle() {

            var segmentArray = window.location.pathname.split('/');
            var segment_4 = segmentArray[4];
            var segment4Array = segment_4.split('-');
            var newTitle = segment4Array[0] + " " + segment4Array[1];

            return newTitle;

        }

        getReportTitle();


        function updateReportHeaderBaseOnURL() {

            if (lastSegment === 'student') {

                btn_ap.addClass("hidden");
                btn_rmd.addClass("hidden");
                percent_skill.detach();

                student_div.show();
                students_div.hide();

            } else if (lastSegment === 'assignment') {

                btn_ap.removeClass("hidden");
                btn_rmd.removeClass("hidden");
                btn_ap.addClass("rn-btn-active");
                percent_skill.detach();
                student_div.hide();
                students_div.show();

            } else if ( $.inArray(lastSegment, beStudentNotDone) ) {
                percent_skill.detach();
            } else {

                btn_ap.removeClass("hidden");
                btn_rmd.removeClass("hidden");
                btn_rmd.addClass("rn-btn-active");
                percent_item.detach();
                student_div.hide();
                students_div.show();

            }

        }

        updateReportHeaderBaseOnURL();


        // console.log(window.rel_path+"teacher/report/"+lastSegment+"/"+lastSegment);

        btn_ap.click(function() {
            // btn_ap.href(href);
        });

        btn_rmd.click(function() {
            // btn_rmd.href(href);
        });




        function parseUrl(url) {
            var urlParamSplit = url.split("?");

            if (urlParamSplit.length !== 2) {
                return "InvalidUrlNoParamsSet";
            }

            var paramsList = urlParamSplit[1].split("&");
            if (paramsList.length < 1) {
                return "InvalidUrlNoParamsFound";
            }

            var paramsObj = {};
            paramsList.forEach(function(item) {
                var keyValueArray = item.split("=");
                paramsObj[keyValueArray[0]] = keyValueArray[1];
            });

            return paramsObj;
        }

        var href = location.href;
        var params = parseUrl(href);
        var lastSegment = window.location.pathname.split('/').pop();
        var assessmentId, classroomId;

        function setAjaxEndpoint() {

            if ($.inArray(lastSegment, beTeacherNotDone) || $.inArray(lastSegment, beStudentNotDone)) {
                lastSegment = 'assignment'; // Use this one for now
            }
        }

        setAjaxEndpoint();

        function setDataParams() {
            if ((params.assessmentId || params.classroomId) === undefined) {

                //Set this temporary while waiting for BE to be ready
                assessmentId = "206a9246-ce83-412b-b8ad-6b3e28be44e3";
                classroomId = "722bfadb-9774-4d59-9a47-89ac9a7a8f9a";

            } else {

                assessmentId = params.assessmentId;
                classroomId = params.classroomId;
            }
        }

        setDataParams();

        $.ajax({

            url: "/BIM/rest/report/" + lastSegment,
            type: "POST",
            dataType: "json",
            data: {
                assessmentId: assessmentId,
                classroomId: classroomId
            },

            success: function(objects) {

                function updateAssignmentSummary(x) {

                    var header = objects.assignments[x].header;
                    var name = objects.assignments[x].name;
                    var car, cdr, report_type_full;

                    // Check for space in report_type
                    if (header.report_type.indexOf(' ') >= 0) {

                        if (getReportTitle() === "Section Exercise") {
                            report_type_full = header.report_type.split(/(\s+)/);
                            car = report_type_full[0];
                            cdr = report_type_full[2];
                        } else {
                            report_type_full = getReportTitle().split(" ");
                            car = report_type_full[0];
                            cdr = report_type_full[1];
                        }

                        report_type_car.html(car);
                        report_type_cdr.html(cdr);
                        report_type_title.html(car + " " + cdr + " " + header.section_num);

                    } else {

                        car = header.report_type;
                        report_type_car.html(car);
                        report_type_title.html(car + " " + header.section_num);
                    }

                    section_num.html(header.section_num);
                    problem_set.html(header.problem_set);

                    // Not show date if summary
                    if (name === "Summary") {

                        start_time.html(" ");
                        due_time.html(" ");

                        $("#as-due-time-div").hide();
                        $("#as-start-time-div").hide();

                    } else {

                        $("#as-due-time-div").show();
                        $("#as-start-time-div").show();

                        start_time.html(moment(parseInt(header.start_time)).format("MM/DD/YYYY h:mm A"));
                        due_time.html(moment(parseInt(header.due_time)).format("MM/DD/YYYY h:mm A"));
                    }

                    // For Student
                    if (header.student_name) {
                        student_name.html(header.student_name);
                    }

                    student_am.html(header.student_am);
                    student_total.html(header.student_total);
                    submit_am.html(header.submit_am);
                    submit_total.html(header.submit_total);
                    avg_score.html(header.avg_score);

                    // Temp
                    assignment.html("ALGEBRA 1 ");
                    date.html("2/10/2015");
                    correct_num.html("8");
                    correct_total_num.html("20");

                    danger.html(header.danger);
                    warning.html(header.warning);
                    success.html(header.success);

                    danger_list.html(header.danger_list);
                    warning_list.html(header.warning_list);
                    success_list.html(header.success_list);

                }


                function updatePercentPieChart() {
                    var data = {};
                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

                    var options = {
                        width: 160,
                        height: 160,
                        chartArea: {
                            left: 10,
                            top: 20,
                            width: "100%",
                            height: "100%"
                        },

                        colors: ['#F46E4E', '#F9C262', '#ADB55E', ],
                        legend: 'none',
                        enableInteractivity: false,
                        pieSliceText: 'none',

                    };


                    // Gather all the data
                    $.each(objects.assignments, function(i, v) {

                        var header = v.header;
                        var total = header.danger + header.warning + header.success;

                        data[i] = new google.visualization.arrayToDataTable([

                            ['Piechart', 'Number of Skills'],
                            ['danger', (header.danger / total) * 100],
                            ['warning', (header.warning / total) * 100],
                            ['success', (header.success / total) * 100],

                        ]);

                    });


                    // Populate the dropdown-menu
                    $.each(objects.assignments, function(i, v) {
                        var name = v.name;
                        var assignmentId = v.assignmentId;

                        // Auto Populate the dropdown-menu
                        $("#as-dd.dropdown").append('<option value="' + assignmentId + '">' + name + '</option>');

                        // Dropdown-menu change
                        $('#as-dd').on('change', function() {
                            var i = $('option:selected', $(this)).index();
                            updateAssignmentSummary(i);
                            chart.draw(data[i], options);
                        });

                    });


                    // Initializing
                    updateAssignmentSummary("0");
                    chart.draw(data[0], options);

                }

                // Load the Visualization API and the piechart package.
                google.load("visualization", "1", {
                    packages: ["corechart"]
                });

                google.setOnLoadCallback(updatePercentPieChart());

            }

        });

    });

});

Answer 1

json 可以作为对象读取，只需使用 for 循环遍历对象数组并以这种方式创建元素。