forEach Loop Only Accounting for First Iteration of Condition-CodePudding

My goal is get all of the data results that my forEach is looping through to post to the correct <li> based on the filter condition. All the data objects within the array with the criteria equaling that of the condition, I want to post within the <ol></ol> as a <li> element. I thought my structure was correct, but it is only posting the first instance. Do I need another forEach within my condition?

Here is a live example:

$(document).ready(function(){

  var equipRequestData = [
    {
      "Title" : "Beerus New Monitor Request",
      "Employee" : "Beerus",
      "LinkToItem" : "www.google.com",
      "Status" : "Open",
      "Type" : "Equipment"
    },
    {
      "Title" : "Beerus New Keyboard Request",
      "Employee" : "Beerus",
      "LinkToItem" : "www.google.com",
      "Status" : "Closed",
      "Type" : "Equipment"
    },
    {
      "Title" : "Beerus New Monitor Request",
      "Employee" : "Beerus",
      "LinkToItem" : "www.google.com",
      "Status" : "Open",
      "Type" : "Help"
    },
    {
      "Title" : "Trunks New Monitor Request",
      "Employee" : "Beerus",
      "LinkToItem" : "www.google.com",
      "Status" : "Closed",
      "Type" : "Help"
    },
  ]

  var currUserId = "Beerus";


  function sortEquipReq(equipRequestData){
    const requests = equipRequestData;

    const openEquip = [];
    const closedEquip = [];
    const openHelp = [];
    const closedHelp = [];

    requests.forEach((request) => {
        console.log(request)
      let type = request.Type;
      let user = request.Employee;
      let status = request.Status;
      if (type === "Equipment" && user === currUserId && status === "Open") {
        $('#openEquipmentReq').html('<li><a href= "'  request.LinkToItem   '">'   request.Title   '</a></li>');
      }
      /* if (type === "Equipment" && user === currUserId && status === "Closed") {
        $('#closedEquipmentReq').html('<li><a href= "'  request.LinkToItem   '">'   request.Title   '</a></li>');
      }
      if (type === "Help" && user === currUserId && status === "Open") {
        $('#openHelpReq').html('<li><a href= "'  request.LinkToItem   '">'   request.Title   '</a></li>');
      }
      if (type === "Help" && user === currUserId && status === "Closed") {
        $('#closedHelpReq').html('<li><a href= "'  request.LinkToItem   '">'   request.Title   '</a></li>');
      } */
    })
  }
  sortEquipReq(equipRequestData);
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active1");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight   "px";
    } 
  });
}

});

    .accordion {
      background-color: #104723;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: center;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .accordion:hover {
      background-color: #0e3f1f;
    }

    .active1:after {
      content: "\2796"; /* Unicode character for "minus" sign (-) */
    }

    .accordion:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .panel {
      padding: 0 18px;
      background-color: #ffff;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
  </head>
  <body>
    <div >
      <div >
        <button >Open Equipment Requests</button>
        <div >
          <ol id="openEquipmentReq">

          </ol>
        </div>
        <button >Closed Equipment Requests</button>
        <div >
          <ol id="closedEquipmentReq">

          </ol>
        </div>
      </div>
      <div >
        <button >Open Help Requests</button>
        <div >
          <ol id="openHelpReq">

          </ol>
        </div>
        <button >Closed Help Requests</button>
        <div >
          <ol id="closedHelpReq">

          </ol>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

You are only setting .html() of element instead of adding to it. If you must use this method, then try x.innerHTML = str_html;

$(document).ready(function() {

  var equipRequestData = [{
      "Title": "Beerus New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Open",
      "Type": "Equipment"
    },
    {
      "Title": "Beerus New Keyboard Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Closed",
      "Type": "Equipment"
    },
    {
      "Title": "Beerus New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Open",
      "Type": "Help"
    },
    {
      "Title": "Trunks New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Closed",
      "Type": "Help"
    },
    {
      "Title": "Beerus New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Open",
      "Type": "Equipment"
    },
    {
      "Title": "Beerus New Keyboard Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Closed",
      "Type": "Equipment"
    },
    {
      "Title": "Beerus New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Open",
      "Type": "Help"
    },
    {
      "Title": "Trunks New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Closed",
      "Type": "Help"
    }    
  ];

  var currUserId = "Beerus";


  function sortEquipReq(equipRequestData) {
    const requests = equipRequestData;

    const openEquip = [];
    const closedEquip = [];
    const openHelp = [];
    const closedHelp = [];

    requests.forEach((request) => {
      // console.log(request)
      let type = request.Type;
      let user = request.Employee;
      let status = request.Status;
      if (type === "Equipment" && user === currUserId && status === "Open") {
        $('#openEquipmentReq')[0].innerHTML  = ('<li><a href= "'   request.LinkToItem   '">'   request.Title   '</a></li>');
      }
      if (type === "Equipment" && user === currUserId && status === "Closed") {
        $('#closedEquipmentReq')[0].innerHTML  = ('<li><a href= "'   request.LinkToItem   '">'   request.Title   '</a></li>');
      }
      if (type === "Help" && user === currUserId && status === "Open") {
        $('#openHelpReq')[0].innerHTML  = ('<li><a href= "'   request.LinkToItem   '">'   request.Title   '</a></li>');
      }
      if (type === "Help" && user === currUserId && status === "Closed") {
        $('#closedHelpReq')[0].innerHTML  = ('<li><a href= "'   request.LinkToItem   '">'   request.Title   '</a></li>');
      }
    })
  }
  sortEquipReq(equipRequestData);
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i  ) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active1");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight   "px";
      }
    });
  }

});

.accordion {
  background-color: #104723;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #0e3f1f;
}

.active1:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

.accordion:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.panel {
  padding: 0 18px;
  background-color: #ffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <div >
    <div >
      <button >Open Equipment Requests</button>
      <div >
        <ol id="openEquipmentReq">

        </ol>
      </div>
      <button >Closed Equipment Requests</button>
      <div >
        <ol id="closedEquipmentReq">

        </ol>
      </div>
    </div>
    <div >
      <button >Open Help Requests</button>
      <div >
        <ol id="openHelpReq">

        </ol>
      </div>
      <button >Closed Help Requests</button>
      <div >
        <ol id="closedHelpReq">

        </ol>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

.html() sets the HTML content, overwriting what was in there before.

What you want is .append().

CodePudding user response：

Your issue is that you are overwriting the html of the list instead of appending to it. This can be fixed by doing (e.g.)

$('#openEquipmentReq').append(<new HTML>)

You can also simplify your sortEquipReq function by building a selector from the request type and status instead of having an if for each pair:

function sortEquipReq(equipRequestData) {
  equipRequestData.forEach((request) => {
    let type = request.Type;
    let user = request.Employee;
    let status = request.Status;
    if (user === currUserId) {
      let list = $('#'   status.toLowerCase()   type   'Req')
      list.append('<li><a href= "'   request.LinkToItem   '">'   request.Title   '</a></li>');
    }
  })
}

Demo:

$(document).ready(function() {

  var equipRequestData = [{
      "Title": "Beerus New Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Open",
      "Type": "Equipment"
    },
    {
      "Title": "Beerus New Keyboard Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Closed",
      "Type": "Equipment"
    },
    {
      "Title": "Beerus Broken Monitor Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Open",
      "Type": "Help"
    },
    {
      "Title": "Trunks Broken Keyboard Request",
      "Employee": "Beerus",
      "LinkToItem": "www.google.com",
      "Status": "Closed",
      "Type": "Help"
    },
  ]

  var currUserId = "Beerus";


  function sortEquipReq(equipRequestData) {
    equipRequestData.forEach((request) => {
      let type = request.Type;
      let user = request.Employee;
      let status = request.Status;
      if (user === currUserId) {
        let list = $('#'   status.toLowerCase()   type   'Req')
        list.append('<li><a href= "'   request.LinkToItem   '">'   request.Title   '</a></li>');
      }
    })
  }
  sortEquipReq(equipRequestData);
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i  ) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active1");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight   "px";
      }
    });
  }

});

.accordion {
  background-color: #104723;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #0e3f1f;
}

.active1:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

.accordion:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.panel {
  padding: 0 18px;
  background-color: #ffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <div >
    <div >
      <button >Open Equipment Requests</button>
      <div >
        <ol id="openEquipmentReq">

        </ol>
      </div>
      <button >Closed Equipment Requests</button>
      <div >
        <ol id="closedEquipmentReq">

        </ol>
      </div>
    </div>
    <div >
      <button >Open Help Requests</button>
      <div >
        <ol id="openHelpReq">

        </ol>
      </div>
      <button >Closed Help Requests</button>
      <div >
        <ol id="closedHelpReq">

        </ol>
      </div>
    </div>
  </div>
</body>

</html>