CODEWITHSUNDEEP
jqueryloopsobject
Sergio
Sergio

Reputation: 822

jQuery Object Iteration

I'm having a bit trouble iterating through objects in jquery. I believe that on line 25 of the js file, holidays.date is not selecting what I intend to be selecting. Which is, for each object in the variable holidays, check to see if any of the date IS today's date. If it is than run the appends otherwise run the generic appends.

How can I fix that selector (holidays.date) to check those dates against today's date?

Thank you all.

$(document).ready(function() {

   var today = new Date(),
      month = today.getMonth(),
      months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
      date = today.getDate(),
      monthDay = months[month] + ' ' + date;

   var suHours = "We're Closed Today.",
      mHours = "9:00am to 5:00pm",
      tHours = "8:00am to 3:00pm",
      wHours = "9:00am to 5:00pm",
      thHours = "9:00am to 5:00pm",
      fHours = "9:00am to 7:00pm",
      sHours = "9:00am to 2:00pm";
   
   var holidays = [
         {date: 'May 10', hours: '8:00am to 12:00pm', message: 'Tuesday\'s Message - Merry Christmas!'}, 
         {date: 'May 11', hours: '9:00am to 1:00pm', message: 'Wednesday\'s Message - Happy New Years!'},
         {date: 'May 12', hours: '10:00am to 2:00pm', message: 'Thursday\'s Message - Happy Thanksgiving!'}, 
      ],
      generic = "Open Right Now!";

   function todayHoliday() {
      if ( monthDay == holidays.date ) {
         $.each( $(holidays), function() {
            $('.today-holiday-hours em').append(this.hours);
            $('.today-holiday-message em').append(this.message);
         });
      } else {
         $('.today-holiday-hours em').append('Generic Hours');
         $('.today-holiday-message em').append('Generic Message');
      }
   }
   todayHoliday();

});
*, body, html {
   font-family: "Arial", sans-serif;
   font-size: 15;
   margin: 0;
   padding: 0;
}

body {
   margin: 20px;
}

h1, section {
   margin: 20px 0;
}

h3 {
   color: #aaa;
}

section p em {
   color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HoursJS Holiday Version</title>
   <link rel="stylesheet" href="style.css">

</head>
<body>
   <h1 id="title">HoursJS Plugin Holiday Version v: 0.0.1</h1>

   <hr>

<!-- Today is Holiday Hours & Message -->
   <section>
      <h3>Today is a Holiday:</h3>
      <p class="today-holiday-hours"><em></em></p>
      <p class="today-holiday-message"><em></em></p>
   </section>

</body>
</html>

Upvotes: 0

Views: 38

Answers (3)

Striker
Striker

Reputation: 505

Try this:

var isHoliday = false;

$.each( $(holidays), function() {
     if ( monthDay == this.date ) 
    { 
        $('.today-holiday-hours em').append(this.hours); 
        $('.today-holiday-message em').append(this.message); });
        isHoliday = true;
    }
} 

if (!isHoliday )
{ 
    $('.today-holiday-hours em').append('Generic Hours');
    $('.today-holiday-message em').append('Generic Message'); 
}

Upvotes: 1

winhowes
winhowes

Reputation: 8065

To use .each you don't need to "select" your holidays, just do this:

var matchFound = false;
$.each(holidays, function() {
    if ( monthDay == this.date ) {
        matchFound = true;
        $('.today-holiday-hours em').append(this.hours);
        $('.today-holiday-message em').append(this.message);
  } 
});
if (!matchFound) {
     $('.today-holiday-hours em').append('Generic Hours');
     $('.today-holiday-message em').append('Generic Message');
}

The selector ($(something)) is used to select elements in the DOM. In this case you already have an array so you can just iterate over it.

EDIT: I updated the function to put the if statement inside of the loop which I believe is the desired behavior. I've also moved the else statement outside of the loop based on the comments of desired behavior

Upvotes: 3

Dlanor
Dlanor

Reputation: 276

I think that you can use the grep function

var xyz = $.grep(holidays, function (n) {
             return n.date === monthDay;
          });

Upvotes: 0

Related Questions