передача данных из json на страницу

у меня есть такой json файл

"{\"book_0\": {\"title\": \"Das Parfum: Die Geschichte Eines Morders\", \"author\": \"Patrick Suskind\", \"image\": \"http://images.amazon.com/images/P/3257228007.01.MZZZZZZZ.jpg\", \"description\": \"Ein rares Meisterwerk zeitgen\\u00f6ssischer Prosa, eine dicht gesponnene, psychologisch raffiniert umgesetzte Erz\\u00e4hlung, die an die fr\\u00fchen St\\u00fccke von Patricia Highsmith erinnert, in ihrer Kunstfertigkeit aber an die Novellistik gro\\u00dfer europ\\u00e4ischer Erz\\u00e4hltradition ankn\\u00fcpft.\"}, \"book_1\": {\"title\": \"Sullivan's Woman (Silhouette Single Title)\", \"author\": \"Nora Roberts\", \"image\": \"http://images.amazon.com/images/P/0373218966.01.MZZZZZZZ.jpg\", \"description\": \"Sullivan's Woman by Nora Roberts released on Jul 25, 2003 is available now for purchase.\"},

это лишь часть, там книг куда больше

есть такой html код

<!-- Book -->
    <div id="book" class="book">
        <!-- Paper 1 -->
        <div id="p1" class="paper">
            <div class="front">
                <div id="f1" class="front-content">



                </div>
            </div>
            <div class="back">
                <div id="b1" class="back-content">
                    <!--<div id="output1"></div>-->

                </div>
            </div>
        </div>
        <!-- Paper 2 -->
        <div id="p2" class="paper">
            <div class="front">
                <div id="f2" class="front-content">
                    <!--<div id="output2"></div>-->

                </div>
            </div>
            <div class="back">
                <div id="b2" class="back-content">
                    <!--<div id="output3"></div>-->

                </div>
            </div>

    </div>

   <!-- Paper 3 -->
        <div id="p3" class="paper">
            <div class="front">
                <div id="f3" class="front-content">
                    <!--<div id="output4"></div>-->

                </div>
            </div>
            <div class="back">
                <div id="b3" class="back-content">
                    <!--<div id="output5"></div>-->

                </div>
            </div>
        </div>
<!-- Paper 4 -->
<div id="p4" class="paper">
    <div class="front">
        <div id="f4" class="front-content">
            <!--<div id="output6"></div>-->

        </div>
    </div>
    <div class="back">
        <div id="b4" class="back-content">
           <!--<div id="output7"></div>-->

        </div>
    </div>
</div>

<!-- Paper 5 -->
<div id="p5" class="paper">
    <div class="front">
        <div id="f5" class="front-content">
            <!--<div id="output8"></div>-->

        </div>
    </div>
    <div class="back">
        <div id="b5" class="back-content">
           <!--<div id="output9"></div>-->

        </div>
    </div>
</div>

<!-- Paper 6 -->
<div id="p6" class="paper">
    <div class="front">
        <div id="f6" class="front-content">
            <!--<div id="output10"></div>-->

        </div>
    </div>
    <div class="back">
        <div id="b6" class="back-content">
            <h1>Back 6</h1>
        </div>
    </div>
</div>
        </div>





    <!-- Next Button -->
    <button id="next-btn">
        <i class="fas fa-arrow-circle-right"></i>
    </button>    

есть такой js файл, который как раз и должен выводит данные из этого json файла на экран

var xhr = new XMLHttpRequest();
xhr.open("GET", "get_books/", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var books = JSON.parse(xhr.responseText);

    // Loop through each book
    for (var i = 0; i < Object.keys(books).length; i++) {
      var bookKey = "book_" + i;
      var book = books[bookKey];

      // Check if the book object and its properties exist
      if (book && book.title && book.author && book.description && book.image) {
        // Create HTML elements for front and back content
        var frontContent = document.createElement("div");
        frontContent.innerHTML = "<h1>" + book.title + "</h1><p>" + book.author + "</p>";

        var backContent = document.createElement("div");
        backContent.innerHTML = "<p>" + book.description + "</p><img src='" + book.image + "' alt='" + book.title + "'>";

        // Append front and back content to corresponding divs
        document.getElementById("f" + (i + 1)).appendChild(frontContent);
        document.getElementById("b" + (i + 1)).appendChild(backContent);
      } else {
        console.error("Invalid book data for " + bookKey);
      }
    }
  }
};
xhr.send(); 

проблема в том, что он отказывается видеть характеристики каждой книги и если в каких-то попытках у меня и выводило что-либо, то лишь undefined.

Помогите разобраться с тем, как это сделать.