Uncaught TypeError: Cannot read property 'length' of null error

1

Hello,

I am getting the error “Uncaught TypeError: Cannot read property ‘length’ of null” in the console and cannot figure out why this is happening. This code is populate a list of stores on a map in groups of 10 at a time and then when you click next it will only display 1 store and then when you click next again it will display 10 again. The error is that it should always display 10 stores at a time. The error is happening at the line

for (var i = 0; i < matches.length; i++) {

Any help is appreciated. Here is my javascript code.


   formatStoreEvents: function(str) {
				
				if (!str || str.length < 1) return '';	
				
				var today = moment();	
				
				// Format from MyFittingExp is:
				// '<p>01/14/2017 12:00PM-03:00PM--<a href="https://my.taylormadegolf.com/myFittingExp/event/event_id">Book an Appointment</a><br/>02/25/2017 09:00AM-05:00PM--<a href="https://my.taylormadegolf.com/myFittingExp/event/event_id">Book an Appointment</a></p>'
				var fittingEventRegEx = /<p>.*Book an Appointment<\/a><\/p>/g;					
							
				var matches = fittingEventRegEx.exec(str);
				var storeEvents = str;
				
				for (var i = 0; i < matches.length; i++) {
					
					// clearing this string of fitting events from the original string
					storeEvents = storeEvents.replace(matches[i], '');
					
					var cleanStr = matches[i].replace('<p>', '').replace('</p>', '');					
					var fittngEventArray = cleanStr.split('<br/>');  
					var stringOfEvents = '';
					
					for (var x = 0; x < fittngEventArray.length; x++) {
						 
					      var eventDataDuplicate = fittngEventArray[x];
					      var eventData = fittngEventArray[x];
					      
					      // get date and time string
					      eventData = eventData.substring(0, eventData.indexOf('--<'));
					      eventData = eventData.split(' ');
					      
					      var eventDateAsMoment = moment(eventData[0], "MM/DD/YYYY");

					      if (today.isSame(eventDateAsMoment, 'day') || !today.isAfter(eventDateAsMoment)) {
					    	  stringOfEvents += '<br />' + eventDataDuplicate;
					      }
					      
					}  
					 
					stringOfEvents = stringOfEvents.replace(/--/g, '<br>').replace(/<\/a>/g, '<br><\/a>'); 
					stringOfEvents = stringOfEvents.replace(/href=/g, 'target="_blank" href=');
					 
					storeEvents = stringOfEvents + '<br />' + storeEvents;
				}			
			   
			    return storeEvents;
			 }
2

try console.log(matches) after that exec line. I think you’re not getting back what you think you’re getting back.

3

If the match succeeds, the exec() method returns an array (with extra properties index and input ; see below) and updates the lastIndex property of the regular expression object. The returned array has the matched text as the first item, and then one item for each capturing parenthetical that matched containing the text that was captured.

If the match fails, the exec() method returns null , and sets lastIndex to 0.

4

I put line into my code and it paused the console. Can you help me with the debugging? I updated my question above on what I am trying to achieve.

6

Thank you for the reply. I updated my code with your suggestions and it did come back as null in the console. How can I fix it so it populates the list with the correct number of stores?

7

It’s probably time to dig into your regular expression and see why it is not finding any matches.

8

There are a few things in your regex that are going to give you problems. The period, and the asterisk (for example) - both are reserved characters in regex-world.

Have you done the FCC lessons on regex? Did you run this through a regex tester online anywhere?

9

I have not. I will run through the lessons tonight.

10 
var matches = fittingEventRegEx.exec(str) || [] ;

should fix the error.

11

Sweet that worked. Thank you!

1 Like