Revisions to HTML scraping and using jQuery

deleted 121 characters in body

Source Link

edited Dec 18, 2016 at 17:17

blue_skies

53
6

Extension looks like this :)

Rollback to Revision 10

Source Link

edited Dec 17, 2016 at 23:50

Vogel612

25.5k
7
59
141

**I updatedI wrote a Chrome extension that lists upcoming concerts for the code in case anyone is interested in how it turned outnext seven days, this month, and next month. I had trouble with the :D Thank you so muchnextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the awesome community and especially cFreed!really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready (function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
const regexDays = /Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g;
const suffixes = {'1': 'st', '2': 'nd', '3': 'rd'};
var systemTime = new Date();
var monthIndex = systemTime.getMonth();
var day = systemTime.getDate();
var thisDay;

$.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
        var eventsparsedData = $($.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(regexDays/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
        events.splice(0, 1);
 
      var monthIndex $= systemTime.getMonth('#nextseven');
      var day = systemTime.clickgetDate(function);
      var testDay = systemTime.getDate();
 {     var week = [];
      var thisDay;

      getDays();

      $('#concerts''#nextseven').emptyon('click', function(); {
        $('#concerts').empty();
        nextSeven();
        });

        $('#thismonth').clickon('click', function() {
            $('#concerts').empty();
            showMonth(monthIndex);
        });

   
      $('#nextmonth').clickon('click', function() {
            $('#concerts').empty();
            showMonthshowNextMonth(monthIndex + 1);
        });

        function nextSevengetDays() {
     
        for (var i = 0; i < 7; i++) {
          if (day < 31) {
           var week.push(day);
 = systemTime          day++;

          } else {
            week.getDatepush(day);
            day = 1;
          }
  thisDay      }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + dayweek[i] + 'st,';

          } else if (suffixes[dayweek[i] %=== 10]2 || 'th'week[i] === 22) +{
            week[i] = ' ' + week[i] + 'nd,'; 

          } else if (week[i] === 3 || week[i] === 23) {
  systemTime.setDate(day          week[i] = ' ' + 1);week[i] + 'rd,';

          } else {
          showMonth(monthIndex, thisDay);
 week[i] = ' ' + week[i] + 'th,';
          }
        }
 
      }

      function showMonthnextSeven(monthIndex,) day{
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) { 

              if (monthIndex === 11 && testDay >= 26) {
            var    if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.stringifyparse(itemeventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || months[0]eventsstr.match(months[monthIndex + 1])) {
                  var concert &&= JSON.parse(eventsstr);
                  $(!day'#concerts').append('<p>' ||+ concert + '</p>');
                }

              } else {
                if (eventsstr.match(day)months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      } 

      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
  <script src=jquery-3.1.1.min.js></script>
  <script type="text/javascript" src="Scrape.js"></script>
</head>
<body>
  <div>
    <h1>NYC Concerts</h1>
    <div id="alltabs">
      <ul class="tab">
        <center>
          <a href="#" onclick="return false;" class="tablinks" id="nextseven">Next 7 Days</a>
          <a href="#" onclick="return false;" class="tablinks" id="thismonth">This Month</a>
          <a href="#" onclick="return false;" class="tablinks" id="nextmonth">Next Month</a>
        </center>
      </ul>
      <h2><div id="concerts"></div></h2>
    </div>
    <link rel="stylesheet" type="text/css" href="popup.css"></link>
</body>
</html>

**Original Question I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready(function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
  var systemTime = new Date();

  $.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
      var parsedData = $.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
      events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').on('click', function() {
        $('#concerts').empty();
        nextSeven();
      });

      $('#thismonth').on('click', function() {
        $('#concerts').empty();
        showMonth();
      });


      $('#nextmonth').on('click', function() {
        $('#concerts').empty();
        showNextMonth();
      });

      function getDays() {

        for (var i = 0; i < 7; i++) {
          if (day < 31) {
            week.push(day);
            day++;

          } else {
            week.push(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + week[i] + 'st,';

          } else if (week[i] === 2 || week[i] === 22) {
            week[i] = ' ' + week[i] + 'nd,';

          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i] + 'rd,';

          } else {
            week[i] = ' ' + week[i] + 'th,';
          }
        }
      }

      function nextSeven() {
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) {

              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
                if (eventsstr.match(months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      }

      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

**I updated the code in case anyone is interested in how it turned out :D Thank you so much to the awesome community and especially cFreed!!

$(document).ready (function() {

var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
const regexDays = /Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g;
const suffixes = {'1': 'st', '2': 'nd', '3': 'rd'};
var systemTime = new Date();
var monthIndex = systemTime.getMonth();
var day = systemTime.getDate();
var thisDay;

$.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
        var events = $($.parseHTML(data)).find('p').text().split(regexDays);
        events.splice(0, 1);
 
        $('#nextseven').click(function() {
            $('#concerts').empty();
            nextSeven();
        });

        $('#thismonth').click(function() {
            $('#concerts').empty();
            showMonth(monthIndex);
        });

        $('#nextmonth').click(function() {
            $('#concerts').empty();
            showMonth(monthIndex + 1);
        });

        function nextSeven() {
            for (var i = 0; i < 7; i++) {
                      var day = systemTime.getDate();
                      thisDay = ' ' + day + (suffixes[day % 10] || 'th') + ',';
                      systemTime.setDate(day + 1);
                      showMonth(monthIndex, thisDay);
            }
        }
 
        function showMonth(monthIndex, day) {
            $.each(events, function(i, item) {
                                var eventsstr = JSON.stringify(item);
                
                if (eventsstr.match(months[monthIndex] || months[0])
                    &&
                (!day || eventsstr.match(day))) {
                var concert = JSON.parse(eventsstr);
                $('#concerts').append('<p>' + concert + '</p>');
                }
            });
        }
    }
});
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
  <script src=jquery-3.1.1.min.js></script>
  <script type="text/javascript" src="Scrape.js"></script>
</head>
<body>
  <div>
    <h1>NYC Concerts</h1>
    <div id="alltabs">
      <ul class="tab">
        <center>
          <a href="#" onclick="return false;" class="tablinks" id="nextseven">Next 7 Days</a>
          <a href="#" onclick="return false;" class="tablinks" id="thismonth">This Month</a>
          <a href="#" onclick="return false;" class="tablinks" id="nextmonth">Next Month</a>
        </center>
      </ul>
      <h2><div id="concerts"></div></h2>
    </div>
    <link rel="stylesheet" type="text/css" href="popup.css"></link>
</body>
</html>

**Original Question I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready(function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
  var systemTime = new Date();

  $.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
      var parsedData = $.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
      events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').on('click', function() {
        $('#concerts').empty();
        nextSeven();
      });

      $('#thismonth').on('click', function() {
        $('#concerts').empty();
        showMonth();
      });


      $('#nextmonth').on('click', function() {
        $('#concerts').empty();
        showNextMonth();
      });

      function getDays() {

        for (var i = 0; i < 7; i++) {
          if (day < 31) {
            week.push(day);
            day++;

          } else {
            week.push(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + week[i] + 'st,';

          } else if (week[i] === 2 || week[i] === 22) {
            week[i] = ' ' + week[i] + 'nd,';

          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i] + 'rd,';

          } else {
            week[i] = ' ' + week[i] + 'th,';
          }
        }
      }

      function nextSeven() {
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) {

              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
                if (eventsstr.match(months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      }

      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready(function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
  var systemTime = new Date();

  $.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
      var parsedData = $.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
      events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').on('click', function() {
        $('#concerts').empty();
        nextSeven();
      });

      $('#thismonth').on('click', function() {
        $('#concerts').empty();
        showMonth();
      });

 
      $('#nextmonth').on('click', function() {
        $('#concerts').empty();
        showNextMonth();
      });

      function getDays() {
 
        for (var i = 0; i < 7; i++) {
          if (day < 31) {
            week.push(day);
            day++;

          } else {
            week.push(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + week[i] + 'st,';

          } else if (week[i] === 2 || week[i] === 22) {
            week[i] = ' ' + week[i] + 'nd,'; 

          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i] + 'rd,';

          } else {
            week[i] = ' ' + week[i] + 'th,';
          }
        }
      }

      function nextSeven() {
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) { 

              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
                if (eventsstr.match(months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      } 

      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
  <script src=jquery-3.1.1.min.js></script>
  <script type="text/javascript" src="Scrape.js"></script>
</head>
<body>
  <div>
    <h1>NYC Concerts</h1>
    <div id="alltabs">
      <ul class="tab">
        <center>
          <a href="#" onclick="return false;" class="tablinks" id="nextseven">Next 7 Days</a>
          <a href="#" onclick="return false;" class="tablinks" id="thismonth">This Month</a>
          <a href="#" onclick="return false;" class="tablinks" id="nextmonth">Next Month</a>
        </center>
      </ul>
      <h2><div id="concerts"></div></h2>
    </div>
    <link rel="stylesheet" type="text/css" href="popup.css"></link>
</body>
</html>

added 1921 characters in body

Source Link

edited Dec 17, 2016 at 23:22

blue_skies

53
6

I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence**I updated the really fugly if-statements. I was wondering ifcode in case anyone had any adviceis interested in how it turned out :D Thank you so much to make the code more condensed. I would really appreciate any feedbackawesome community and especially cFreed!

Extension looks like this :)

!

$(document).ready (function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
const regexDays = /Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g;
const suffixes = {'1': 'st', '2': 'nd', '3': 'rd'};
var systemTime = new Date();
var monthIndex = systemTime.getMonth();
var day = systemTime.getDate();
var thisDay;

$.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
        var parsedDataevents = $($.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /gregexDays);
        events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').onclick('click', function() {
            $('#concerts').empty();
            nextSeven();
        });

        $('#thismonth').onclick('click', function() {
            $('#concerts').empty();
            showMonth(monthIndex);
        });
 

        $('#nextmonth').onclick('click', function() {
            $('#concerts').empty();
        showNextMonth    showMonth(monthIndex + 1);
        });

        function getDaysnextSeven() {
 
            for (var i = 0; i < 7; i++) {
          if (day < 31) {
           var week.push(day);
            day++;

          } else {
           = weeksystemTime.pushgetDate(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i]thisDay = ' ' + week[i]day + 'st,';

          } else if (week[i]suffixes[day ===% 210] || week[i] === 22'th') {
            week[i] = ' ' + week[i] + 'nd',';
 
          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i]systemTime.setDate(day + 'rd,';
1);
          } else {
            week[i] = ' ' + week[i] + 'thshowMonth(monthIndex,';
          }thisDay);
        }
      }
 
      function nextSeven() {}

        forfunction showMonth(i = 0; i < week.length;monthIndex, i++day) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) {
 
              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concerteventsstr = JSON.parse(eventsstr);
                  $('#concerts').appendstringify('<p>' + concert + '</p>'item);
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])months[0]) {
                  var concert = JSON.parse(eventsstr);&&
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
               !day if|| (eventsstr.match(months[monthIndex]day))) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      }
 
      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
  <script src=jquery-3.1.1.min.js></script>
  <script type="text/javascript" src="Scrape.js"></script>
</head>
<body>
  <div>
    <h1>NYC Concerts</h1>
    <div id="alltabs">
      <ul class="tab">
        <center>
          <a href="#" onclick="return false;" class="tablinks" id="nextseven">Next 7 Days</a>
          <a href="#" onclick="return false;" class="tablinks" id="thismonth">This Month</a>
          <a href="#" onclick="return false;" class="tablinks" id="nextmonth">Next Month</a>
        </center>
      </ul>
      <h2><div id="concerts"></div></h2>
    </div>
    <link rel="stylesheet" type="text/css" href="popup.css"></link>
</body>
</html>

**Original Question I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready(function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
  var systemTime = new Date();

  $.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
      var parsedData = $.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
      events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').on('click', function() {
        $('#concerts').empty();
        nextSeven();
      });

      $('#thismonth').on('click', function() {
        $('#concerts').empty();
        showMonth();
      });


      $('#nextmonth').on('click', function() {
        $('#concerts').empty();
        showNextMonth();
      });

      function getDays() {

        for (var i = 0; i < 7; i++) {
          if (day < 31) {
            week.push(day);
            day++;

          } else {
            week.push(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + week[i] + 'st,';

          } else if (week[i] === 2 || week[i] === 22) {
            week[i] = ' ' + week[i] + 'nd,';

          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i] + 'rd,';

          } else {
            week[i] = ' ' + week[i] + 'th,';
          }
        }
      }

      function nextSeven() {
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) {

              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
                if (eventsstr.match(months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      }

      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready(function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
  var systemTime = new Date();

  $.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
      var parsedData = $.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
      events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').on('click', function() {
        $('#concerts').empty();
        nextSeven();
      });

      $('#thismonth').on('click', function() {
        $('#concerts').empty();
        showMonth();
      });
 

      $('#nextmonth').on('click', function() {
        $('#concerts').empty();
        showNextMonth();
      });

      function getDays() {
 
        for (var i = 0; i < 7; i++) {
          if (day < 31) {
            week.push(day);
            day++;

          } else {
            week.push(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + week[i] + 'st,';

          } else if (week[i] === 2 || week[i] === 22) {
            week[i] = ' ' + week[i] + 'nd,';
 
          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i] + 'rd,';

          } else {
            week[i] = ' ' + week[i] + 'th,';
          }
        }
      }
 
      function nextSeven() {
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) {
 
              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
                if (eventsstr.match(months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      }
 
      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
  <script src=jquery-3.1.1.min.js></script>
  <script type="text/javascript" src="Scrape.js"></script>
</head>
<body>
  <div>
    <h1>NYC Concerts</h1>
    <div id="alltabs">
      <ul class="tab">
        <center>
          <a href="#" onclick="return false;" class="tablinks" id="nextseven">Next 7 Days</a>
          <a href="#" onclick="return false;" class="tablinks" id="thismonth">This Month</a>
          <a href="#" onclick="return false;" class="tablinks" id="nextmonth">Next Month</a>
        </center>
      </ul>
      <h2><div id="concerts"></div></h2>
    </div>
    <link rel="stylesheet" type="text/css" href="popup.css"></link>
</body>
</html>

**I updated the code in case anyone is interested in how it turned out :D Thank you so much to the awesome community and especially cFreed!!

$(document).ready (function() {

var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
const regexDays = /Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g;
const suffixes = {'1': 'st', '2': 'nd', '3': 'rd'};
var systemTime = new Date();
var monthIndex = systemTime.getMonth();
var day = systemTime.getDate();
var thisDay;

$.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
        var events = $($.parseHTML(data)).find('p').text().split(regexDays);
        events.splice(0, 1);

        $('#nextseven').click(function() {
            $('#concerts').empty();
            nextSeven();
        });

        $('#thismonth').click(function() {
            $('#concerts').empty();
            showMonth(monthIndex);
        });

        $('#nextmonth').click(function() {
            $('#concerts').empty();
            showMonth(monthIndex + 1);
        });

        function nextSeven() {
            for (var i = 0; i < 7; i++) {
                      var day = systemTime.getDate();
                      thisDay = ' ' + day + (suffixes[day % 10] || 'th') + ',';
                      systemTime.setDate(day + 1);
                      showMonth(monthIndex, thisDay);
            }
        }

        function showMonth(monthIndex, day) {
            $.each(events, function(i, item) {
                                var eventsstr = JSON.stringify(item);
                
                if (eventsstr.match(months[monthIndex] || months[0])
                    &&
                (!day || eventsstr.match(day))) {
                var concert = JSON.parse(eventsstr);
                $('#concerts').append('<p>' + concert + '</p>');
                }
            });
        }
    }
});
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8 ;">
  <script src=jquery-3.1.1.min.js></script>
  <script type="text/javascript" src="Scrape.js"></script>
</head>
<body>
  <div>
    <h1>NYC Concerts</h1>
    <div id="alltabs">
      <ul class="tab">
        <center>
          <a href="#" onclick="return false;" class="tablinks" id="nextseven">Next 7 Days</a>
          <a href="#" onclick="return false;" class="tablinks" id="thismonth">This Month</a>
          <a href="#" onclick="return false;" class="tablinks" id="nextmonth">Next Month</a>
        </center>
      </ul>
      <h2><div id="concerts"></div></h2>
    </div>
    <link rel="stylesheet" type="text/css" href="popup.css"></link>
</body>
</html>

**Original Question I wrote a Chrome extension that lists upcoming concerts for the next seven days, this month, and next month. I had trouble with the nextSeven() method, especially transitioning from dates like Dec. 31st to Jan. 1st, hence the really fugly if-statements. I was wondering if anyone had any advice to make the code more condensed. I would really appreciate any feedback!

Extension looks like this :)

$(document).ready(function() {

  var months = ['Jan. ', 'Feb. ', 'March ', 'April ', 'May ', 'June ', 'July ', 'Aug. ', 'Sept. ', 'Oct. ', 'Nov. ', 'Dec. '];
  var systemTime = new Date();

  $.ajax({
    url: 'http://nycmetalscene.com/',
    type: 'GET',
    success: function(data) {
      var parsedData = $.parseHTML(data);
      var parseResults = $(parsedData).find('p').text();
      var events = parseResults.split(/Sun\. |Mon\. |Tues\. |Wed\. |Thurs\. |Fri\. |Sat\. /g);
      events.splice(0, 1);
      var monthIndex = systemTime.getMonth();
      var day = systemTime.getDate();
      var testDay = systemTime.getDate();
      var week = [];
      var thisDay;

      getDays();

      $('#nextseven').on('click', function() {
        $('#concerts').empty();
        nextSeven();
      });

      $('#thismonth').on('click', function() {
        $('#concerts').empty();
        showMonth();
      });


      $('#nextmonth').on('click', function() {
        $('#concerts').empty();
        showNextMonth();
      });

      function getDays() {

        for (var i = 0; i < 7; i++) {
          if (day < 31) {
            week.push(day);
            day++;

          } else {
            week.push(day);
            day = 1;
          }
        }

        for (var i = 0; i < week.length; i++) {
          if (week[i] === 1 || week[i] === 31) {
            week[i] = ' ' + week[i] + 'st,';

          } else if (week[i] === 2 || week[i] === 22) {
            week[i] = ' ' + week[i] + 'nd,';

          } else if (week[i] === 3 || week[i] === 23) {
            week[i] = ' ' + week[i] + 'rd,';

          } else {
            week[i] = ' ' + week[i] + 'th,';
          }
        }
      }

      function nextSeven() {
        for (i = 0; i < week.length; i++) {
          thisDay = week[i];

          $.each(events, function(i, item) {
            var eventsstr = JSON.stringify(item);

            if (eventsstr.match(thisDay)) {

              if (monthIndex === 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[0])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else if (monthIndex < 11 && testDay >= 26) {
                if (eventsstr.match(months[monthIndex]) || eventsstr.match(months[monthIndex + 1])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }

              } else {
                if (eventsstr.match(months[monthIndex])) {
                  var concert = JSON.parse(eventsstr);
                  $('#concerts').append('<p>' + concert + '</p>');
                }
              }
            }
          });
        }
      }

      function showMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex])) {
            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }

      function showNextMonth() {
        $.each(events, function(i, item) {
          var eventsstr = JSON.stringify(item);

          if (eventsstr.match(months[monthIndex + 1] || months[0])) {

            var concert = JSON.parse(eventsstr);
            $('#concerts').append('<p>' + concert + '</p>');
          }
        });
      }
    }
  });
});

added 18 characters in body

Source Link

edited Dec 17, 2016 at 5:26

blue_skies

53
6

Loading

added 18 characters in body

Source Link

edited Dec 17, 2016 at 4:36

blue_skies

53
6

Loading

added 47 characters in body

Source Link

edited Dec 11, 2016 at 18:00

blue_skies

53
6

Loading

added 74 characters in body

Source Link

edited Dec 10, 2016 at 2:58

blue_skies

53
6

Loading

edited body

Source Link

edited Dec 10, 2016 at 2:19

blue_skies

53
6

Loading

deleted 47 characters in body

Source Link

edited Dec 10, 2016 at 0:28

blue_skies

53
6

Loading

added 119 characters in body

Source Link

edited Dec 10, 2016 at 0:22

blue_skies

53
6

Loading

added 931 characters in body

Source Link

edited Dec 10, 2016 at 0:13

blue_skies

53
6

Loading

deleted 41 characters in body; edited tags; edited title

Source Link

edited Dec 10, 2016 at 0:01

Jamal

35.2k
13
134
238

Loading

Source Link

asked Dec 9, 2016 at 23:59

blue_skies

53
6

Loading

Stack Exchange Network

Return to Question