Правильно отформатированный многомерный массив из файла php, не разбираемый в функции jquery ajax

Question

Я пытаюсь создать онлайн Библию для сайта служения, над которым я работаю. Он позволяет пользователю выбрать книгу Библии, которая, в свою очередь, заполняет раздел глав с помощью jQuery, при котором при нажатии на главу предполагается для заполнения фактической главы с использованием jQuery.

Щелчок книги работает нормально и заполняет соответствующие главы, но щелчок главы ничего не делает.

Вот 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>';

Html в комплекте 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>...

При нажатии .gChapters используется jQuery для добавления глав в DOM на основе атрибута data-chapterCt="50".

jQuery - это прекрасно работает

$(".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);
    }

});

Сценарий предполагается для добавления соответствующей главы к .bibleResults по щелчку .chapters с использованием jQuery Ajax , но это не работает .

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

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

Я протестировал json_encode($verses);, и он отображает правильный json многомерный массив.

json массив

[{"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."},...

Я занимался этим два дня ... Я дошел до замешательства ... все, что вы можете сделать, чтобы помочь, высоко ценится.

Answer 1

ОК - пытаемся сохранить как можно больше вашего кода.

$(".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}`);        
      });
    }
  });
});