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:

Copy
<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.

Copy
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.

Copy
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.

Copy
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;
        resolve(sections);
      }
    });
    xhr.open(
      `GET`,
      `https://api.scripture.api.bible/v1/bibles/${bibleVersionID}/books/${bibleBookID}/sections`
    );
    xhr.setRequestHeader(`api-key`, API_KEY);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}