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.availableBooks;
    // console.log(this.books);
  }

  // get only the books that we have backend data for
  get
  availableBooks()
  {
    return this.store.findAll('book').then(function(backendBooks) {
      let available = [];
      backendBooks.forEach(
        value => {
          let foundValue = books.find(function(book) {
            return book['name'] == value.id
          });
          if(foundValue) {
            available.push(foundValue);
          }
        });
      return available;
    }).then(function(response) {
      console.log(response);
      return response;
    });
  }

  @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);
  }
}