en_btr_frontend/app/components/scripture-nav-bar.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from "@glimmer/tracking";
import { books } from "../data/book-chapter-verse";
import { inject as service } from '@ember/service';

export default class ScriptureNavBarComponent extends Component {
  @service router;
  @service store;

  @tracked chaptersVisible = false;
  @tracked versesVisible = false;
  @tracked currentBook = null;
  @tracked currentChapter = null;
  @tracked books = [];

  constructor(...args) {
    super(...args);
    console.log(books);
    this.books = this.getBooks();
    // console.log(this.books);
  }

  // get only the books that we have backend data for
  async getBooks()
  {
    const results = await this.store.findAll('book');

    this.books = results.map((book) => {
      let foundValue = books.find(function(value) {
        return value['name'] == book.id
      });
      if(foundValue) {
        return foundValue;
      }
    });
  }

  @action
  showChapters(book) {
    this.chaptersVisible = true;
    this.versesVisible = false;
    this.currentBook = book;
  }

  @action
  showVerses(book, chapter) {
    this.versesVisible = true;
    this.currentChapter = chapter;
  }

  @action
  verseSelected(book, chapter, verse) {
    // Load the DOM with verse page
    console.log('[verseSelected] called: ' + book + ' ' + chapter.chapter + ':' + verse);
    console.log(chapter);
    this.router.transitionTo('verse', book + '-' + chapter.chapter + '-' + verse);
  }
}