Develop Reference

JSON-array and forEach issue

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

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.

trying to get a rocket to run (doesnt work :()

So i'm currently partaking in some tasks for my school and then i came across one of them which got me a bit confused! We are asked to make the rocket launch however i am confused on how i would go about this. Hopefully, you can help me do this and thanks for reading.
// Launch the rocket!
var launchRocket = function (sequence) {
if (sequence != 321) {
var _$_f307 = ["\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x43\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x62\x6F\x64\x79", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77\x20\x61\x6E\x69\x6D\x61\x74\x65", "\x66\x69", "\x72\x33\x61", "\x77\x61\x79", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C", "\x72\x6F\x63\x6B\x65\x74\x2D\x63\x6F\x64\x65"];
document[_$_f307[3]][_$_f307[2]](_$_f307[1])[0][_$_f307[0]] = _$_f307[4];
var e = _$_f307[5];
var x = _$_f307[6];
var n = _$_f307[7];
document[_$_f307[3]][_$_f307[2]](_$_f307[9])[0][_$_f307[8]] = e + x + n;
}
}

All these \xXX are Hex codes of letters. Just decode them to see
var _$_f307 = [//create array
"className", //[0]
"animation-window",
"getElementsByClassName",
"body",
"animation-window animate",
"fi",
"r3a",
"way",
"innerHTML",
"rocket-code" //[9]
];
//then replace other cipher with values
//document[_$_f307[3]][_$_f307[2]](_$_f307[1])[0][_$_f307[0]] = _$_f307[4];
document["body"]["getElementsByClassName"]("animation-window")[0]["className"] = "animation-window animate";
var e = _$_f307[5]; //fi
var x = _$_f307[6]; //r3a
var n = _$_f307[7]; //way
//document[_$_f307[3]][_$_f307[2]](_$_f307[9])[0][_$_f307[8]] = e + x + n;
document["body"]["getElementsByClassName"]("rocket-code")[0]["innerHTML"] = e + x + n; //fir3away
Note that you can address JS object properties using dot . or bracket [] syntax.
So add rocket launcher ;)
<div class="animation-window"></div>
<div class="rocket-code"></div>
Update See working example
// Launch the rocket!
var launchRocket = function(sequence) {
if (sequence != 321) {
var _$_f307 = ["\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x43\x6C\x61\x73\x73\x4E\x61\x6D\x65", "\x62\x6F\x64\x79", "\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x2D\x77\x69\x6E\x64\x6F\x77\x20\x61\x6E\x69\x6D\x61\x74\x65", "\x66\x69", "\x72\x33\x61", "\x77\x61\x79", "\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C", "\x72\x6F\x63\x6B\x65\x74\x2D\x63\x6F\x64\x65"];
console.log(_$_f307);
document[_$_f307[3]][_$_f307[2]](_$_f307[1])[0][_$_f307[0]] = _$_f307[4];
var e = _$_f307[5];
var x = _$_f307[6];
var n = _$_f307[7];
document[_$_f307[3]][_$_f307[2]](_$_f307[9])[0][_$_f307[8]] = e + x + n;
}
}
//Call the function
//launchRocket(0);
.animate {
background: red
}
<div class="animation-window">Will be red</div>
<div class="rocket-code">code</div>
<button type="button" onclick="launchRocket(0);">Launch!</button>

Modifying calendar so that notes will open when dates are clicked

I have 2 files, calendar.html and notes.html, and here is a screenshot of the calendar:
I want notes.html to open when dates are clicked.
Here is my code so far:
$.fn.zabuto_calendar = function(b) {
var c = $.extend({}, $.fn.zabuto_calendar_defaults(), b);
var a = $.fn.zabuto_calendar_language(c.language);
c = $.extend({}, c, a);
this
.each(function() {
var j = $(this);
j.attr("id", "zabuto_calendar_" + Math.floor(Math.random() * 99999).toString(36));
j.data("initYear", c.year);
j.data("initMonth", c.month);
j.data("monthLabels", c.month_labels);
j.data("weekStartsOn", c.weekstartson);
j.data("navIcons", c.nav_icon);
j.data("dowLabels", c.dow_labels);
j.data("showToday", c.today);
j.data("showDays", c.show_days);
j.data("showPrevious", c.show_previous);
j.data("showNext", c.show_next);
j.data("cellBorder", c.cell_border);
j.data("jsonData", c.data);
j.data("ajaxSettings", c.ajax);
j.data("legendList", c.legend);
j.data("actionFunction", c.action);
j.data("actionNavFunction", c.action_nav);
l();
function l() {
var y = parseInt(j.data("initYear"));
var B = parseInt(j.data("initMonth")) - 1;
var C = new Date(y, B, 1, 0, 0, 0, 0);
j.data("initDate", C);
var D = (j.data("cellBorder") === true) ? " table-bordered"
: "";
$tableObj = $('<table class="table' + D + '"></table>');
$tableObj = w(j, $tableObj, C.getFullYear(), C.getMonth());
//Custom code
var i = document.getElementById('$tableObj');
i = w('notes.html');
$legendObj = g(j);
var z = $('<div class="zabuto_calendar" id="'
+ j.attr("id") + '"></div>');
z.append($tableObj);
z.append($legendObj);
j.append(z);
var A = j.data("jsonData");
if (false !== A) {
r(j, C.getFullYear(), C.getMonth())
}
}
Can you help me get on the right direction?

I think your code is a bit complicated, and dificult to understand.
I think what you should do first is to create two objects:
First Object Calendar
function Calendar(month,year) {
var actualDate=new Date();
var month=(!month)?(actualDate.getMonth()):month;
var year=(!year)?(actualDate.getFullYear()):year;
var days=new Array();
//DEFINE SETTERS AND GETTERS
//FOLLOWING FUNCTION SHOWS THE CALENDAR
this.showCalendar=function(){
var d=new Date(year,month,1);
var result='<table summary="Calendar"><caption>'+tableMonth[month]+'</caption><thead><th>Monday</th><th>Tuesday</th><th>Wed</th><th>Thirsday</th><th>Friday</th><th>Sat</th><th>Sun</th></thead>'+
<tr>';
if (f.getDay()==0)
for (i=1;i<7;i++)
result+='<td></td>'
else
for (i=1;i<f.getDay();i++)
result+='<td></td>';
for (i=1;i<=days.length;i++){
var f=new Date(year,month,i);
if (f.getDay()==0)
resultad+='<td>'+i+'</td></tr><tr>'
else
resultad+='<td>'+i+'</td>';
}
resultad+='</tr></tbody></table>';
return resultado;
}
}
the second object to create are the notes, following the same proccess:
Second object Notes:
function notes(param1,param2) {
//same process as before you define your object as you like
}
Once, you have defined both objects then using the dom either with jquery or javascript you can show your note in a new layer or in a new window (window.open), or as you like.
The code is too wide to write it here, so i have written you the main ideas.

How can I loop through creating Objects?

Below is what the code looks like right now, with less rows and less properties.
var row1 = new Object();
var row2 = new Object();
var row3 = new Object();
var row4 = new Object();
var row5 = new Object();
var row6 = new Object();
var row7 = new Object();
row1.name = "Hello World!";
alert (row1.name);
This code below doesn't work as intended because row isn't primitive, but I need to do something like this because I have a billion row variables.
var row = [];
var row1 = [];
var row2 = [];
var row3 = [];
row.push(1);
row[1].name = "Hello World";
alert(row[1].name);
How can I do this, if at all possible?

var rows = [];
for(var i = 0; i < 7; i++)
{
rows.push(new Object());
}
rows[0].name = "Hello World!";
alert(rows[0].name);

You can create custom complex objects in javascript like this:
//complex object
ComplexObj = function(){
var self = {
'prop1': 'value1',
'prop2': 'value2',
'prop3': {
'subprop1': 'subvalue1',
'subprop2': 'subvalue2'
},
'prop4': [
1, 2, 3, 4
]
};
return self;
};
//code that creates instances of the complex object
var rows = [];
var newObj1 = new ComplexObj();
newObj1.prop1 = 'newvalue1';
var newObj2 = new ComplexObj();
newObj2.prop3.subprop2 = 'newsubvalue2';
rows.push(newObj1);
rows.push(newObj2);
for (var i = 0; i < rows.length; i++){
alert('row' + i + ': prop1=' + rows[i].prop1 + ' subprop2=' + rows[i].prop3.subprop2);
}
You can view the demo here. Notice that I update newObj1.prop1 and newObj2.prop3.subprop2 to show that newObj1 and newObj2 are different instances of ComplexObj.
http://jsfiddle.net/p5evg/1/

How do I create a simple search function in javascript?

I start with a short array of some schools and then I want to test if the value of an input matches one of these schools.
Here is my code thus far:
var $schools = [
'University of Tennessee-Knoxville',
'Maryville College',
'Cleveland State Community College',
'East Tennessee State University'
];
var $searchBar = $('input.searchBar');
$searchBar.keyup(function(){
var $searchValue = $searchBar.val();
for (var x = 0; x < $schools.length; x++) {
var $schoolLC = $schools[x].toLowerCase();
var $searchLC = $searchValue.toLowerCase();
var $searchingValue = new RegExp('.*' + $searchLC + '.*');
if ($schoolLC.match($searchingValue)) {
console.log($searchLC);
}
}
});
But something is obviously wrong (I believe with my RegExp), because it never console.logs the $searchLC.
Thanks so much!!

Isn't this
if ($searchLC.match($searchingValue)) {
supposed to be
if ($schoolLC.match($searchingValue)) {

I think you need to escape all RegEx special characters:
function escapeRegExp(str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
...
var $searchingValue = new RegExp('.*' + escapeRegExp($searchLC) + '.*');
...

Try this out: Live Demo
for (var x = 0; x < $schools.length; x++) {
var $schoolLC = $schools[x].toLowerCase();
var $searchLC = $searchValue.toLowerCase();
var $searchingValue = new RegExp('.*' + $searchLC + '.*');
if ($schoolLC.match($searchingValue)) {
alert($schoolLC);
}
}

Well, for this particular example, instead of using match you can use indexOf so that your code becomes
var $schools = [
'University of Tennessee-Knoxville',
'Maryville College',
'Cleveland State Community College',
'East Tennessee State University'
];
var $searchBar = $('input.searchBar');
$searchBar.keyup(function(){
var $searchValue = $searchBar.val();
for (var x = 0; x < $schools.length; x++) {
var $schoolLC = $schools[x].toLowerCase();
var $searchLC = $searchValue.toLowerCase();
if ($schoolLC.indexOf($searchLC) >= 0) {
console.log($searchLC);
}
}
});