我正在编写一个普通的 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 数组中任何直接子项的属性？
- 我究竟做错了什么？