API.bible Logo

Documentation Navigation

Getting a list of sections

HTML - chapter.html

API.Bible can also return a list of sections. This will go on the chapter.html so a new file will not be needed. Directly below the HTML added in the last section, add the following lines:

<h4 id="select-prompt" class="list-heading"><span>Select a Section</span></h4>
<div id="section-list" class="list-container section-list"></div>

JavaScript - chapter.html

The JavaScript will also be added in the chapter.html file. Three things need to be added.

First, add the reference to the section list as the second line of JavaScript.

const bibleSectionList = document.querySelector(`#section-list`);

Next, make a call to getSections (defined later) and load the section list. This should go right below the call to getChapters.

getSections(bibleVersionID, bibleBookID).then((sectionList) => {
if (sectionList) {
sectionHTML += `<ol>`;
for (let section of sectionList) {
sectionHTML += `<li class="section"><a href="section.html?version=${bibleVersionID}&abbr=${abbreviation}&section=${section.id}"><abbr class="section-id">${section.id}</abbr><span class="bible-version-name"> ${section.title} </span></a></li>`;
sectionHTML += `</ol>`;
} else {
sectionHTML += `<div>There are no sections for this version and chapter.</div>`;
bibleSectionList.innerHTML = sectionHTML;

Finally, add the 'getSectionsfunction below thegetChapters` function.

function getSections(bibleVersionID, bibleBookID) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener(`readystatechange`, function () {
if (this.readyState === this.DONE) {
const { data } = JSON.parse(this.responseText);
const sections = data
? data.map(({ title, id }) => {
return { title, id };
: null;
xhr.setRequestHeader(`api-key`, API_KEY);
xhr.onerror = () => reject(xhr.statusText);