ES6 JavaScript устанавливает массив как свойство объекта vanilla console
Я пишу ванильный сценарий JavaScript ES6 в качестве сборщика информации для запуска в консоли браузера. Мой сценарий захватывает заголовки обучающих видео Lynda.com/LinkedIn для печати. Алгоритм прост:
АЛГОРИТМ
- Возьмите все родительские группы, которые содержат как названия глав, так и соответствующие названия подглав.
- FOREACH группа, захватить заголовок (строка) и субтитры (массив строк)
- Создать временный объект
- Добавить заголовок к временному объекту
- Добавить субтитры для текущего заголовка во временный массив
- Добавить массив субтитров как значение текущего свойства объекта
- Распечатать результаты на консоль
У меня проблемы с шагом 6. Я просмотрел SO-сообщения с похожими названиями, но все они очень специализированы по своему охвату, и я не смог найти в них решения своей проблемы.
Вот модель конечного выходного объекта, которого я пытаюсь достичь:
var chObjArr = [
{
ChTitle: "0. Introduction",
"subtitles": [
"0.1 Whatever",
"0.2 Whatever"
]
},
{
ChTitle: "1. Getting Started",
"subtitles": [
"1.1 Whatever",
"1.2 Whatever"
]
},
{
ChTitle: "2. Setup",
"subtitles": [
"2.1 Whatever",
"2.2 Whatever"
]
}
]
Свойство subtitles должно вызываться так:
chObjArr[0].subtitles
В результате:
["2.1 Whatever", "2.2 Whatever"]
КОД
Вот мой код, сокращенный до самого необходимого:
console.clear();
/* ----------- VARIABLES ----------- */
// Create an array to hold processed course group objects
var chObjArr = [];
var outputViews = {}; // object with string properties
var selChGroups = '.classroom-toc-chapter';
var selChapterVid = '.classroom-toc-chapter__toggle-title.t-14.t-bold.t-white';
var selSubVids = '.classroom-toc-item__title.t-14.t-white';
var chapterGroups = document.querySelectorAll(selChGroups);
var subvArr = [];
// --- POPULATE GROUPS ARRAY --- //
Array.from(chapterGroups).forEach(function(group, i) {
var thisObj = {};
var ChTitle = group.querySelector(selChapterVid).innerText;
ChTitle = ChTitle.split("\n")[0];
// console.log(ChTitle);
// Add zero to chapter title, if first item
ChTitle = i==0 ? "0. " + ChTitle : ChTitle;
// Add final count num to chapter title, if last item
ChTitle = i==(chObjArr.length-1) ? (chObjArr.length-1) + ". " + ChTitle : ChTitle;
console.log("DEBUGGING: ------- group ------");
console.log(group);
// Add properties to current object
thisObj.ChTitle = ChTitle;
// Find all subvids for current chapter vid
subvids = group.querySelectorAll(selSubVids);
console.log("SUBVIDS: -------------------------");
console.log(subvids);
// clear subvids array
subvArr = [];
// Process subvids object array
Array.from(subvids).forEach(function(vid, j) {
// Grab current subvid title
var subvidTitle = vid.innerText.split("\n")[0];
subvidTitle = i + "." + j + "_" + subvidTitle;
console.log("subvidTitle ---------------");
console.log(subvidTitle);
// Push current subvid title onto subvids array
subvArr.push(subvidTitle);
console.log('chObjArr');
console.log(chObjArr);
});
// thisObj.ChTitle.subvids = subvArr;
thisObj.ChTitle.subvids.push(subvArr);
chObjArr.push(thisObj);
});
console.log('chObjArr');
console.log(chObjArr);
<div id="ember43" class="classroom-layout-sidebar-body classroom-layout__sidebar-body ember-view classroom-body__sidebar-body">
<section id="ember45" class="classroom-toc-chapter ember-view">
<h3>
<button class="classroom-toc-chapter__toggle btn-inverse-link" aria-expanded="true" data-ember-action="" data-ember-action-46="46">
<span class="classroom-toc-chapter__toggle-title t-14 t-bold t-white"> Introduction </span>
</button>
</h3>
<ul class="classroom-toc-chapter__items">
<li class="classroom-toc-item classroom-toc-item--selected" data-toc-content-id="urn:li:learningApiVideo:2867552">
<div class="classroom-toc-item__content">
<div class="classroom-toc-item__title t-14 t-white">Creating a book in InDesign <span class="a11y-text"> (Viewed) </span></div>
<div class="t-12 t-white--light">48s</div>
</div>
<button
id="ember49"
class="classroom-bookmark-toggle ember-view classroom-toc-item__bookmark artdeco-button artdeco-button--circle artdeco-button--tertiary artdeco-button--inverse artdeco-button--1"
aria-pressed="false"
></button>
</li>
<li class="classroom-toc-item" data-toc-content-id="urn:li:learningApiVideo:3494909">
<div class="classroom-toc-item__content">
<div class="classroom-toc-item__title t-14 t-white">What you should know <span class="a11y-text"> (Viewed) </span></div>
<div class="t-12 t-white--light">2m 18s</div>
</div>
<button
id="ember52"
class="classroom-bookmark-toggle ember-view classroom-toc-item__bookmark artdeco-button artdeco-button--circle artdeco-button--tertiary artdeco-button--inverse artdeco-button--1"
aria-pressed="false"
></button>
</li>
<li class="classroom-toc-item" data-toc-content-id="urn:li:learningApiVideo:383747">
<div class="classroom-toc-item__content">
<div class="classroom-toc-item__title t-14 t-white">Using the exercise files <span class="a11y-text"> (Viewed) </span></div>
<div class="t-12 t-white--light">2m 6s</div>
</div>
<button
id="ember55"
class="classroom-bookmark-toggle ember-view classroom-toc-item__bookmark artdeco-button artdeco-button--circle artdeco-button--tertiary artdeco-button--inverse artdeco-button--1"
aria-pressed="false"
></button>
</li>
</ul>
</section>
<section id="ember57" class="classroom-toc-chapter ember-view">
<h3>
<button class="classroom-toc-chapter__toggle btn-inverse-link" aria-expanded="true" data-ember-action="" data-ember-action-58="58">
<span class="classroom-toc-chapter__toggle-title t-14 t-bold t-white"> 1. Getting Started </span>
</button>
</h3>
<ul class="classroom-toc-chapter__items">
<li class="classroom-toc-item" data-toc-content-id="urn:li:learningApiVideo:3503479">
<div class="classroom-toc-item__content">
<div class="classroom-toc-item__title t-14 t-white">Overview of the book <span class="a11y-text"> (Viewed) </span></div>
<div class="t-12 t-white--light">2m 26s</div>
</div>
<button
id="ember287"
class="classroom-bookmark-toggle ember-view classroom-toc-item__bookmark artdeco-button artdeco-button--circle artdeco-button--tertiary artdeco-button--inverse artdeco-button--1"
aria-pressed="false"
></button>
</li>
<li class="classroom-toc-item" data-toc-content-id="urn:li:learningApiVideo:2042286">
<div class="classroom-toc-item__content">
<div class="classroom-toc-item__title t-14 t-white">Setting up a workspace <span class="a11y-text"> (Viewed) </span></div>
<div class="t-12 t-white--light">2m 23s</div>
</div>
<button
id="ember290"
class="classroom-bookmark-toggle ember-view classroom-toc-item__bookmark artdeco-button artdeco-button--circle artdeco-button--tertiary artdeco-button--inverse artdeco-button--1"
aria-pressed="false"
></button>
</li>
</ul>
</section>
<section id="ember60" class="classroom-toc-chapter classroom-toc-chapter--collapsed ember-view"></section>
<section id="ember84" class="classroom-toc-chapter classroom-toc-chapter--collapsed ember-view">
<h3>
<button class="classroom-toc-chapter__toggle btn-inverse-link" aria-expanded="false" data-ember-action="" data-ember-action-85="85">
<span class="classroom-toc-chapter__toggle-title t-14 t-bold t-white"> Conclusion </span>
</button>
</h3>
</section>
</div>
ВОПРОСОВ
- Почему мое свойство субтитров не заполняет / не присваивает / не принимает назначенный массив и т. Д.?
- Как я могу назначить массив как свойство любых прямых потомков в моем массиве chObjArr?
- Что я делаю неправильно?