从对象/数组创建 UL 列表

Question

这个项目的最终想法是从一个对象创建章节和课程列表。

我已经设法创建了唯一的标题 ul 元素，但是当我尝试将关联的 li 列表附加到每个 ul 时，我失去了逻辑。

这是我的代码和demo jsfiddle。非常感谢您的帮助。

var courselist = {
  "items": [{
    "chapterHeader": "Chapter 1",
    "chapterNum": "1",
    "lesson_id": 1,
    "title": "Lesson 1",
  }, {
    "chapterHeader": "Chapter 1",
    "chapterNum": "1",
    "lesson_id": 2,
    "title": "Lesson 2",
  }, {
    "chapterHeader": "Chapter 1",
    "chapterNum": "1",
    "lesson_id": 3,
    "title": "Lesson 3",
  }, {
    "chapterHeader": "Chapter 2",
    "chapterNum": "2",
    "lesson_id": 4,
    "title": "Lesson 4",
  }, {
    "chapterHeader": "Chapter 2",
    "chapterNum": "2",
    "lesson_id": 5,
    "title": "Lesson 5",
  }, {
    "chapterHeader": "Chapter 3",
    "chapterNum": "3",
    "lesson_id": 6,
    "title": "lesson 6",
  }, {
    "chapterHeader": "Chapter 3",
    "chapterNum": "3",
    "lesson_id": 7,
    "title": "lesson 7",
  }, ]
}
//
var course_obj = courselist.items,
  chapters_arr = [],
  tmp = {},
  item,
  listChaps = "",
  lesson_arr;

// Getting unique chapters
for (var i = 0; i < course_obj.length; i++) {
  item = course_obj[i];
  console.log(item);
  if (!tmp[item.chapterHeader]) {
    tmp[item.chapterHeader] = {
      chapter_name: item.chapterHeader,
      associated_lesson_arr: []
    };
    chapters_arr.push(tmp[item.chapterHeader]);
  }
  if (item.title != null) {
    tmp[item.chapterHeader].associated_lesson_arr.push(item.title);
  }
}
// Create a links and uls for chapters
for (var t = 0; t < chapters_arr.length; t++) {
  listChaps += "<a href='#' class='chapter-header' data-toggle='dropdown'>" +
    chapters_arr[t].chapter_name + "</a><ul class='chapters_ul'></ul>";
  lesson_arr = chapters_arr[t].associated_lesson_arr;
  console.log(lesson_arr);
}
$("#containner").html(listChaps);
// Create li lists for associated lessons
for (i = 0; i < lesson_arr.length; i++) {
  var li = document.createElement('li');
  li.innerHTML = lesson_arr[i];
  $("#containner .chapters_ul").append(li);
}

.chapter-header {
  color: #232525;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 100;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

ul.chapters_ul {
  list-style-type: none;
  margin-bottom: 20px;
  margin-top: 10px;
}

ul.chapters_ul li.lesson-list {
  font-size: 22px;
  line-height: 1;
  padding: 8px 4px 8px;
  text-indent: 10px;
}

ul.chapters_ul li:before {
  font-size: 18px;
  vertical-align: middle;
}

ul.chapters_ul li:before {
  content: "\2714";
  color: #73ff00;
  display: inline-block;
  padding-right: 10px;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="containner"></div>

Answer 1

对于像我这样的新手来说，这是我对这个项目的谦虚解决方案。我想向堆栈的专家学习他们将如何解决这样的问题。 这是工作演示 jsfiddle

var courselist = {
            "LESSONS": [{
                "chapterHeader": "Chapter 1",
                "chapterNum": "1",
                "lesson_id": 1,
                "title": "Lesson 1",
            }, {
                "chapterHeader": "Chapter 1",
                "chapterNum": "1",
                "lesson_id": 2,
                "title": "Lesson 2",
            }, {
                "chapterHeader": "Chapter 1",
                "chapterNum": "1",
                "lesson_id": 3,
                "title": "Lesson 3",
            }, {
                "chapterHeader": "Chapter 2",
                "chapterNum": "2",
                "lesson_id": 4,
                "title": "Lesson 4",
            }, {
                "chapterHeader": "Chapter 2",
                "chapterNum": "2",
                "lesson_id": 5,
                "title": "Lesson 5",
            }, {
                "chapterHeader": "Chapter 3",
                "chapterNum": "3",
                "lesson_id": 6,
                "title": "lesson 6",
            }, {
                "chapterHeader": "Chapter 3",
                "chapterNum": "3",
                "lesson_id": 7,
                "title": "lesson 7",
            }, ]
        }
// 
    //
    var course_obj = courselist.LESSONS,
        chapters_arr = [],
        tmp = {},
        eachLesson,
        listChaps = "",
        lesson_arr;

    // Getting unique chapters
    for (var i = 0; i < course_obj.length; i++) {
        eachLesson = course_obj[i];
        // console.log(eachLesson);
        if (!tmp[eachLesson.chapterHeader]) {

            tmp[eachLesson.chapterHeader] = {
                chapter_name: eachLesson.chapterHeader,
                associated_lesson_arr: []
            };

            chapters_arr.push(tmp[eachLesson.chapterHeader]);
        }
        if (eachLesson.title != null) {
            tmp[eachLesson.chapterHeader].associated_lesson_arr.push(eachLesson.title);
            //   console.log(tmp[eachLesson.chapterHeader].associated_lesson_arr)
        }

    }
    // console.log(chapters_arr);
    for (j = 0; j < chapters_arr.length; j++) {
        listChaps += "<a href='#' class='chapter-header' data-toggle='dropdown'>" +
            chapters_arr[j].chapter_name + "</a><ul class='chapters_ul'></ul>";

        $('#container').html(listChaps);
    }

    // console.log(theTitle);
    for (l = 0; l < chapters_arr.length; l++) {
        lesson_arr = chapters_arr[l].associated_lesson_arr;
        for (x = 0; x < lesson_arr.length; x++) {
            var theTitle = lesson_arr[x];
            // console.log(theTitle);
            var ul = $(".chapters_ul");
            newli = document.createElement('li');
            newli.append(theTitle);
           //
           //now length of $(".chapters_ul") is equal to 
           // chapters_arr.length so all chapters can get their 
           //assocciated lesson and can be appended to their ul.
            ul[l].append(newli);
        }
    }

 .chapter-header {
        color: #232525;
        font-family: sans-serif;
        font-size: 18px;
        font-weight: 100;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    ul.chapters_ul {
        list-style-type: none;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    
    ul.chapters_ul li {
        font-size: 22px;
        line-height: 1;
        padding: 8px 4px 8px;
        text-indent: 10px;
        cursor: pointer;
    }
    
    ul.chapters_ul li:before {
        font-size: 18px;
        vertical-align: middle;
    }
    
    ul.chapters_ul li:before {
        content: "\2714";
        color: #73ff00;
        display: inline-block;
        padding-right: 10px;
    }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="container"></div>