API.bible Logo
MenuClose Menu

Documentation Navigation

Getting a list of verses

Table of Contents

HTML - verse.html

The HTML and JavaScript is similar on this page but there is a key difference. Besides just showing a list of verses, this page also displays the full text of the selected chapter. Use the HTML from before, but replace the section between the main tags with the following:

<h4 class="list-heading"><span>Select a Verse</span></h4>
<div id="verse-list" class="list-container numeric-list"></div>
<div class="eb-container" id="chapter-text"></div>

Also, right below the link to main.css in the header, link to scripture.css with this line:

<link href="css/scripture.css" rel="stylesheet" />

Remember, scripture.css contains styles specifically for the HTML returned from the API. For the style to work correctly, the returned HTML must be enclosed in an element containing the class eb-container.

If you use scripture.css on your page, make sure to enclose the HTML returned from the API in a container that has the class eb-container."

Finally, directly above the JavaScript section of the file and below the link to my_key.js, add the following line so we are able to use FUMS data (this is explained more later in this section).

<script src="http://cdn.scripture.api.bible/fums/fumsv2.min.js"></script>

Whenever your page will get verse text from API.Bible, you should include the line above to handle FUMS data.

JavaScript - verse.html

You know the drill by now: the JavaScript below goes right in the verse.html file.

<!doctype html>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet">
    <title>Bible API Example Application</title>
  </head>
  <body class="index">
    <header>
      <div class="container">
        <h1>
          <a class="flex" href="/">
            <span class="logo" title="American Bible Society">ABS</span>
            <span>API Demo App</span>
          </a>
        </h1>
      </div>
    </header>
    <div class="subheader">
      <div class="container flex">
        <div class="subheadings">
          <h2>Select a</h2>
          <h3>Bible</h3>
        </div>
      </div>
    </div>
    <main class="container">
      <div id="bible-version-list" class="list-container bible-list"></div>
    </main>
    <script src="js/my_key.js"></script>
    <script>
      // JAVASCRIPT GOES HERE
    </script>
  </body>
</html>

Some key things to notice:

  • Line 26: bibleChapterID returned from the API includes both the book abbreviation and chapter number. Here they are broken out into individual variables.
  • This page has two API calls. Both the getVerses and getChapterText functions get data from the API.
  • The getChapterText function is the first time we use FUMS data.

FUMS Data

FUMS is the Fair Use Management System. It's a system that we ask all API developers to use as a way to help us ensure that the API contents are being used fairly. It also allows us to profile usage of the various versions, books, chapters, and verses that are requested from the API, so that we can communicate the value of API-accessible Scripture texts back to copyright holders and publishers.

The easiest way to set this up is to include the JavaScript file referenced above (fumsv2.min.js) in your project. All API calls that return verse text also return a fumsId in the meta section. To send API.Bible data about your request, make a call to the _BAPI.t function from the provided JavaScript file. See line 71 above to see how it is done in this project.

On this page, include the getParameterByName and searchButton functions from before.

Prev

Getting a list of sections

Next

Getting a specific verse