创建一个包含多个元素的 JavaScript 数组并嵌套 Arrays

Question

I'm trying to assign multiple elements and nested arrays to represent several mp3 files. Each array item will be assigned several unique elements

const sermon = {
    id: "",
    topic: "",
    book: "",
    bookPart: "",
    path: "",
    file: "",
    fileType: "",
    sermonName: function() { 
        return (this.book + " " + this.bookPart).toUpperCase(); 
    }
};

So basically I would like

sermon[0] = { id: "01" topic: "New Testament", book: "Hebrews", bookPart: "Part 1", path: "sermons/" + sermon.book, file: "hebrews_part1.mp3", fileType: "mp3", sermonName: "HEBREWS PART 1"

The "id, book, topic" would be the same for each "sermon.bookPart, sermon.file". For each book the "id, book, and topic" would change (as expected)

It would write to the following:

<h3 id="demo"></h3>
<p id="topic"></p>
<p id="book"></p>
<p id="file"></p>
<p id="path"></p>
document.getElementById("demo").innerHTML = sermon.sermonName();
document.getElementById("topic").innerHTML = sermon.topic;
document.getElementById("book").innerHTML = sermon.book;
document.getElementById("file").innerHTML = sermon.file;
document.getElementById("path").innerHTML = sermon.path;

I've tried to manually populate and assign arrays, but got stuck trying to do 3 nested for loops to add "Part 1,2,3" in with the book[] arrays

let x = "";
const sermon = {
    topic: "New Testament",
    path: "sermons/",
    book: [
        { name: "Hebrews", files: ["hebrews_part1.mp3", "hebrews_part2.mp3", "hebrews_part3.mp3"] },
        { name: "1Corinthians", files: ["1cor_part1.mp3", "1cor_part2.mp3", "1cor_part3.mp3"] }
    ]
};

for (let i in sermon.book) {
    x += "<h3>" + sermon.book[i].name + "</h3>";
    for (let j in sermon.book[i].files) {
        x += "<a href=" + sermon.path + sermon.book[i].name + "/" + sermon.book[i].files[j] + ">" + sermon.book[i].files[j] + "</a><br>";
    };
};

Answer 1

So you will need to convert the sermon object to another array.

const sermons =
[
    topic: "New Testament",
    path: "sermons/",
    book: [
        { name: "Hebrews", files: ["hebrews_part1.mp3", "hebrews_part2.mp3", "hebrews_part3.mp3"] },
        { name: "1Corinthians", files: ["1cor_part1.mp3", "1cor_part2.mp3", "1cor_part3.mp3"] }
    ], 
... // add more sermons here
]
};

you can then iterate over the sermons using another for loop. Unfortunately, this is just a result of the structure. What you can do is then create a new variable to reference the current level of iteration, ie sermons is the top level object, but each sermon is just another name for sermons[h] , sermon.book[i] becomes book , etc., that way it's a little easier to visualize what you're using.

for (let h in sermons) {
    let sermon = sermons[h];
    for (let i in sermon.book) {
        let book = sermon.book[i];
        x += "<h3>" + book.name + "</h3>";
        for (let j in book.files) {
            x += "<a href=" + sermon.path + book.name + "/" + book.files[j] + ">" + book.files[j] + "</a><br>";
        }
    }
}