The final idea of this project is to create chapters and lessons lists from an object.
I have managed to create the unique header ul elements but when I try to append the associated li lists to each ul I lost my logic.
Here is my code and the demo jsfiddle. Your help is much appreciated.
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>CodePudding user response：
This is my humble solution to this project for those new-bees like me. I would like to learn from the pros of the stack how they would tackle such a problem. Here is the working demo 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>