JSON-array and forEach issue

Question

So... The problem I have according to the console is: "Uncaught TypeError: Cannot read property 'title' of undefined at custom.js:42, at Array.forEach (), at custom.js:39"

How is "title" undefined? What's wrong with my.forEach? (sad noises)

Example of first of six objects in the JSON-array I've built:

var  newReleases =  [   
    {
"title":"Honor - Defending the motherland",
"author":"Mark Thomas",
"genre":"Fiction",  
"description":"In legislation and formal documents the suffix shire was generally not used: for example, Bedfordshire was referred to as the administrative county of Bedford and the Northamptonshire council as the county council of Northampton.The 1888 Act did not contain a list of administrative counties: it was not until 1933 and the passing of a new Local Government Act."},

For loop with forEach function:

for (var i = 0; i < 6; i++){
    
newReleases.forEach (function (newReleases) { 
    
var bookTitle = document.getElementsByClassName('card-header')
var t = document.createTextNode(newReleases[i].title);
bookTitle.appendChild(t);

var bookAuthor = document.getElementsByClassName('card-title')
var a = document.createTextNode(newReleases[i].authors);
bookAuthor.appendChild(a);

var cardGenre = document.getElementsByClassName("card-subtitle");
var genre = document.createTextNode(newReleases[i].genre);
cardGenre.appendChild(genre);   
    
    
var cardDescr = document.getElementsByClassName('card-text');
var p = document.createTextNode(newReleases[i].description);
cardDescr.appendChild(p);
        
    }) //end of forEach
} // end of for-loop

Answer 1

Use either for or forEach() , not both.

for (var i = 0; i < newReleases.length; i++) {
  var bookTitle = document.getElementsByClassName('card-header')[0]
  var t = document.createTextNode(newReleases[i].title);
  bookTitle.appendChild(t);

  var bookAuthor = document.getElementsByClassName('card-title')[0]
  var a = document.createTextNode(newReleases[i].authors);
  bookAuthor.appendChild(a);

  var cardGenre = document.getElementsByClassName("card-subtitle")[0];
  var genre = document.createTextNode(newReleases[i].genre);
  cardGenre.appendChild(genre);

  var cardDescr = document.getElementsByClassName('card-text')[0];
  var p = document.createTextNode(newReleases[i].description);
  cardDescr.appendChild(p);
}

or

newReleases.forEach(function(release) {
  var bookTitle = document.getElementsByClassName('card-header')[0]
  var t = document.createTextNode(release.title);
  bookTitle.appendChild(t);

  var bookAuthor = document.getElementsByClassName('card-title')[0]
  var a = document.createTextNode(release.authors);
  bookAuthor.appendChild(a);

  var cardGenre = document.getElementsByClassName("card-subtitle")[0];
  var genre = document.createTextNode(release.genre);
  cardGenre.appendChild(genre);

  var cardDescr = document.getElementsByClassName('card-text')[0];
  var p = document.createTextNode(release.description);
  cardDescr.appendChild(p);
});

When you use forEach() you don't need to subscript the array variable, you just use the parameter to the callback function.