Correctly formatted multidimensional array from php file not parsing in jquery ajax function

Question

I am attempting to create an online Bible for a ministry site I am working on. It allows the user to select a book of the Bible, which, in turn, populates the chapters div using jQuery, upon which when a chapter is clicked, it is supposed to populate the actual chapter using jQuery.

The book click works fine and populates the related chapters, but the chapter click does nothing.

Here is the Html

/* showBibleWrap
    ------------------------------------------------------ */
    echo '<div class="showBibleWrap">';

        # bible books
        echo '<div class="bibleBooks">'; 
            echo file_get_contents($level.'core/bible/data/books-of-the-bible.dat');
        echo '</div>';

        # bible chapters
        echo '<div class="bibleChapters"></div>';

        # show bible results
        echo '<div class="bibleResults"></div>';

    echo '</div>';

The Html included on books-of-the-bible.dat

<div class="gChapters" data-theBook="Genesis" data-chapterCt="50">Genesis</div>
<div class="gChapters" data-theBook="Exodus" data-chapterCt="40">Exodus</div>...

On the click of .gChapters uses jQuery to appends the chapters to the DOM based on the data-chapterCt="50" attribute.

jQuery - this works fine

$(".gChapters").click(function(){
    var whichBook = $(this).attr("data-theBook");
    var ct = $(this).attr("data-chapterCt");

    $('.bibleChapters').html('');

    for (i = 0; i < ct; i++) {
        var ii = i + 1;
        $('.bibleChapters').append('<div class="chapters" data-book="'+whichBook+'" data-chapter="'+ii+'">'+ii);
    }

});

The script is supposed to append the related chapter to .bibleResults on the click of .chapters using jQuery Ajax but this does not work.

The jQuery

$(".chapters").click(function(){
    var whichBook = $(this).attr("data-book");
    var chapter = $(this).attr("data-chapter");
    $('.bibleResults').html('');

    $.ajax({
        type:"POST",
        url:siteURL + 'core/bible/parse-verses.php',
        data: {whichBook:whichBook, chapter:chapter} ,
        success: function (JSONObject) {

            $.each(JSONObject, function(k,item){                
            $('.bibleResults').append('<p class="verseWrap"><b>['+item.book_name+' '+item.chapter_id+':'+item.this_verse_id+']</b>&nbsp;'+item.verse);  
            });     
        }
    });
});

The parse-verses.php file

$level = '../../';  
    include($level.'inc/ini.php');

    $whichBook = $_POST['whichBook'];
    $chapter = $_POST['chapter'];

    $selectqup = $db->prepare("SELECT * FROM  verses_of_bible WHERE book_name=:THENAME AND chapter_id=:CHAP");
    $selectqup->bindValue(':THENAME',$whichBook,PDO::PARAM_INT); 
    $selectqup->bindValue(':CHAP',$chapter,PDO::PARAM_INT);
    $selectqup->execute();

    $verses = array();

    while($row = $selectqup->fetch(PDO::FETCH_ASSOC)){$verses[] = $row;}

    header('Content-type: application/json');
    echo json_encode($verses);

I have tested the json_encode($verses); and it renders a correct json multidimensional array.

json array

[{"verse_id":"7129","testament":"Old","book_id":"8","book_name":"Ruth","chapter_id":"1","this_verse_id":"1","verse":" Now it came to pass in the days when the judges ruled, that there was a famine in the land. And a certain man of Beth-lehem-judah went to sojourn in the country of Moab, he, and his wife, and his two sons."},{"verse_id":"7130","testament":"Old","book_id":"8","book_name":"Ruth","chapter_id":"1","this_verse_id":"2","verse":" And the name of the man [was] Elimelech, and the name of his wife Naomi, and the name of his two sons Mahlon and Chilion, Ephrathites of Beth-lehem-judah. And they came into the country of Moab, and continued there."},...

I have been on this for two days... I have researched to the point of confusion... whatever you can do to assist is much appreciated.

Answer 1

OK - trying to preserve as much as possible of your code.

$(".chapters").click(function(){
  var whichBook = $(this).attr("data-book");
  var chapter = $(this).attr("data-chapter");
  $('.bibleResults').html('');

  $.ajax({
    type:"POST",
    url:siteURL + 'core/bible/parse-verses.php',
    data: {whichBook:whichBook, chapter:chapter} ,
    success: function (JSONObject) {
      try { const retVal = JSON.parse(JSONObject); } catch (e) { /* parse failed */ }
      console.log(`Parsed! Length of object = ${Object.keys(retVal).length}`); //
      // 
      retVal.forEach( function(item) {
        $('.bibleResults').append(`<p class="verseWrap"><b>${item.book_name}${item.chapter_id}:${item.this_verse_id}]</b>&nbsp;${item.verse}`);        
      });
    }
  });
});