0

I'm trying to display a page of 9 students, I want it to show the student list item if it passes the conditional, or does not display it if it doesn't.

However, I am getting Uncaught TypeError: Cannot set property 'display' of Undefined @ showpage (script.js:40), which is the display: block in the for loop's if statement.

There is also a data.js file which contains the array of student objects.

Where am I going wrong?

JS:

            // Global Variables
        const page = document.querySelector('.page');
        const itemsPerPage = 9;
        const studentListUl = document.querySelector('.student-list');
        const studentItemLi = studentListUl.children;
        const pagBtnUL = document.createElement('ul');
        const pagDiv = document.createElement('div');
        pagDiv.className = 'pagination';
        
        
        /*
        Create the `showPage` function
        This function will create and insert/append the elements needed to display a "page" of nine students
        */
        const showPage = (list, page) => {   
           //Create first and last student variables with math calculation
           let firstIndex = (page * itemsPerPage) - itemsPerPage;
           let lastIndex = page * itemsPerPage;   
   
       //Set student list UL to empty string to remove students prev displayed
       studentListUl.innerHTML = '';
    
       //For loop to go through each student entry once
       for (let i = 0; i < list.length; i++) {
          //Conditional statement to check if current position should be displayed
          if (i >= firstIndex && i < lastIndex) {
             //make the students display on the page
             list[i].style.display = 'block';
          } else {
             //or it does not if not meet condition
             list[i].style.display = 'none';
          }
       }
    }


showPage(studentListUl, 1);

Data.js (array of student objects, partially shown some I have omitted)

// Array of student objects
const data = [
  {
    name: {
      title: "Miss",
      first: "Ethel",
      last: "Dean",
    },
    email: "ethel.dean@example.com",
    registered: {
      date: "12-15-2005",
      age: 15,
    },
    picture: {
      large: "https://randomuser.me/api/portraits/women/25.jpg",
      medium: "https://randomuser.me/api/portraits/med/women/25.jpg",
      thumbnail: "https://randomuser.me/api/portraits/thumb/women/25.jpg",
    },
  },
  {
    name: {
      title: "Mrs",
      first: "Lorraine",
      last: "Lynch",
    },
    email: "lorraine.lynch@example.com",
    registered: {
      date: "02-24-2006",
      age: 14,
    },
    picture: {
      large: "https://randomuser.me/api/portraits/women/88.jpg",
      medium: "https://randomuser.me/api/portraits/med/women/88.jpg",
      thumbnail: "https://randomuser.me/api/portraits/thumb/women/88.jpg",
    },
  },
  {
    name: {
      title: "Mr",
      first: "Gregory",
      last: "Vargas",
    },
    email: "gregory.vargas@example.com",
    registered: {
      date: "03-20-2013",
      age: 7,
    },
    picture: {
      large: "https://randomuser.me/api/portraits/men/23.jpg",
      medium: "https://randomuser.me/api/portraits/med/men/23.jpg",
      thumbnail: "https://randomuser.me/api/portraits/thumb/men/23.jpg",
    },
  },
  {
    name: {
      title: "Mr",
      first: "Lawrence",
      last: "Martin",
    },
    email: "lawrence.martin@example.com",
    registered: {
      date: "06-10-2007",
      age: 13,
    },
    picture: {
      large: "https://randomuser.me/api/portraits/men/50.jpg",
      medium: "https://randomuser.me/api/portraits/med/men/50.jpg",
      thumbnail: "https://randomuser.me/api/portraits/thumb/men/50.jpg",
    },
  },

HTML (partially shown):

 <ul class="student-list">

    <!-- Dynamically insert students here
    
    EXAMPLE - Student list item:

    <li class="student-item cf">
      <div class="student-details">
        <img class="avatar" src="https://randomuser.me/api/portraits/women/25.jpg" alt="Profile Picture">
        <h3>Ethel Dean</h3>
        <span class="email">ethel.dean@example.com</span>
      </div>
      <div class="joined-details">
        <span class="date">Joined 12-15-2005</span>
      </div>
    </li>

    -->

  </ul>

  <div class="pagination">
    <ul class="link-list">

      <!-- Dynamically insert pagination buttons here

      EXAMPLE - Two pagination buttons, one with active class, one without:
        
      <li>
        <button type="button" class="active">1</button>
      </li>
      <li>
        <button type="button">2</button>
      </li>
  
    -->

    </ul>
  </div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;800&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', Helvetica, sans-serif;
  background-color: rgb(229, 238, 250);
  transition: 0.4s;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page {
  max-width: 1024px;
  margin: auto;
  width: 95%;
}



header {
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 2em 0;
}

header h2 {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #4a5568;
  letter-spacing: 2px;
  margin-bottom: 25px;
}



.student-search {
  display: flex;
}

.student-search input {
  width: 100%;
  border-radius: 4px 0 0 4px;
  border: 1px solid rgb(30, 144, 255);
  padding: 10px 16px;
  font-size: 14px;
}

.student-search input::placeholder {
  color: #929b9e;
}

.student-search button {
  cursor: pointer;
  width: 55px;
  border-radius: 0 4px 4px 0;
  border: 1px solid #1e90ff;
  border-left: none;
  padding: 0px 5px;
  font-size: 14px;
  background-color: #1e90ff;
  color: #fff;
}

.student-search button img {
  width: 25px;
}



.student-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 2em;
}

.student-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5em;
  background-color: #fff;
  border-radius: 2px;
  -webkit-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
}

.avatar {
  margin: 0 auto;
  border-radius: 50%;
  background-color: white;
  background-blend-mode: multiply, luminosity;
  width: 90px;
  height: 90px;
  margin: auto auto 15px;
}

.student-details::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  background: rgba(30, 144, 255, 0.25);
  border-radius: 50%;
}

.student-item h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: 0.45em;
  color: #1e90ff;
}

.student-item .email {
  font-weight: 600;
  color: #6d778a;
  font-size: 14px;
  letter-spacing: .5px;
}

.date {
  display: block;
  font-size: 14px;
  color: #6a7679;
  font-weight: 400;
  width: 100%;
  padding-top: 1.1em;
  border-top: solid 1px #dcdcdc;
  margin-top: 1.1em;
}



.pagination {
  margin: 30px 0 60px;
  text-align: center;
}

.pagination li {
  display: inline;
  padding: 0 3px;
}

.pagination li button {
  font-size: 1em;
  cursor: pointer;
  outline: none;
  padding: 0.5em 0.85em;
  background: #fff;
  border: none;
  border-radius: 3px;
  text-decoration: none;
  color: #1e90ff;
  box-shadow: 0 1px 8px 0 rgba(22, 42, 90, 0.05);
  transition: 0.4s;
}

.pagination li button.active,
.pagination li button:hover {
  background-color: #1e90ff;
  color: #fff;
}


.student-search span {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}



.no-results {
  font-family: 'Nunito', sans-serif;
  display: block;
  font-size: 1.5rem;
  color: #6d778a;
  width: 500px;
  margin-top: 15px;
  margin-bottom: 15px;
}



@media screen and (min-width: 700px) {

  .page {
    width: 70%;
  }

  header {
    flex-flow: row;
    align-items: center;
    padding: 3em 0;
  }

  header h2 {
    margin-right: auto;
    margin-bottom: 0;
  }

  .student-item {
    border-radius: 5px;
    box-shadow: 0 4px 16px 0 rgba(22, 42, 90, 0.09);
  }
}
trusaiyan
  • 1
  • 2
  • 2
    What is `list`? The error points to `list[i]` returning undefined. – Terry Jun 30 '21 at 08:16
  • I think I have answered this below, apologies as I am learning JS. It should be the student list UL from the data.js file with the array of student objects (not shown in the initial question) – trusaiyan Jun 30 '21 at 09:41
  • Hi Terry, see my amended above code? – trusaiyan Jul 01 '21 at 13:28

1 Answers1

0

list[i] is undefined - where do you set it?

You can wrap it with :

if (typeof list[i]['style'] !== 'undefined') {
    list[i].style.display = 'none';
}

but that doesnt really solve your problem - It'll just get rid of the error

update your question to show where you set the styles property and we might be able to help.

piguy
  • 1
  • 3
  • Thanks for the response, but I still do not fully follow. The list should be the student list items in the data.js file which has the array of student objects (this is not shown in my first question sorry). When I call the function with the data passed in (student list ul) should it not pass these student objects in? I will amend my typo it should have said studentListUl instead of data in the function call. (or should I be passing in the children of the list ul? – trusaiyan Jun 30 '21 at 09:39
  • You want to pass in the array of student objects and then iterate over them but some of the student objects are missing the style property. We need to see the student object model and where the student objects are created to find the issue. You seem to be passing a html element into the showPage function however you also need to pass the array of student objects. – piguy Jun 30 '21 at 10:00
  • I will edit the first question file to show the array file and some of the html file – trusaiyan Jun 30 '21 at 10:31
  • Hi Does anyone has the answer as to where I'm going wrong now I've supplied the info? – trusaiyan Jul 01 '21 at 07:45
  • There are much neater and easier ways to do what your trying here ( https://angular.io/api/common/NgForOf or https://material.angular.io/components/paginator/overview ) which i would recommend reading about. However have you printed out studentListUl or its children to see what they look like? that should give some insight into whats going on – piguy Jul 01 '21 at 15:05
  • Thanks but I can't use angular as it has to be pure JS for the project so far – trusaiyan Jul 01 '21 at 19:08
  • I've managed to get it to show the students using insertAdjacentHTML() method, with a template literal for the DOM elements. But this does not explain obviously why the other method does not work above? In regards to printing out studentListUl or its children, the former returns the UL with the class of 'student-list', including each li item ('student-item') and their respective content. The latter returns a 'HTMLCollection(9)', 0 to 9 with loads of properties and values for each item. Does this explain where I went wrong? – trusaiyan Jul 02 '21 at 21:48