从对象/数组创建 UL 列表

Posted 2023-05-09

【中文标题】从对象/数组创建 UL 列表

【英文标题】：Create UL lists from an object/array

【发布时间】：2021-11-05 23:00:54

【问题描述】：

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

我已经设法创建了唯一的标题 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>

【参考方案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>