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

You shouldn't use both `for` and `foreach` to loop over the same array. — Barmar, Jul 28 '20 at 21:45
As to why your reference is wrong, it's most likely confusion over the argument passed into the forEach also being named `newReleases`. That isn't an array. — Taplar, Jul 28 '20 at 21:46
Don't use the same variable `newReleases` for the callback function parameter. That makes it the object, not the array. — Barmar, Jul 28 '20 at 21:46
Just going off of the logic, it would make more sense if it were say `forEach(function(book){ ...` — Taplar, Jul 28 '20 at 21:47

Barmar · Answer 1 · 2020-07-29T14:56:12.883

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.

Thanks alot! This is what happens when you teach yourself JS with youtube. hehe! Perhaps you can help me figure out how to get rid of my new shiny error-message ".appendChild is not a function"? From what I can gather from other post here on stack overflow it's an issue with string vs DOM-elements. I just cant figure out where Im going wrong. Im using the forEach function like this: — SherardiaAvensis, Jul 29 '20 at 12:34
newReleases.forEach (function (book) { var bookTitle = document.getElementsByClassName('card-header'); var t = document.createTextNode(book.title); bookTitle.appendChild(t); — SherardiaAvensis, Jul 29 '20 at 12:35
See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return. I've updated the answer. — Barmar, Jul 29 '20 at 14:56

JSON-array and forEach issue

1 Answers1