Question

我正在尝试为孩子的班级创建一个简单的班级目录。我有一个JSON格式的学生数组，并写了一个AJAX调用来询问孩子的名字和父母的信息。但是有些人没有两个父母或两个联系人信息吗？我已经尝试过“如果（studentData！== null）{ 显示数据}，但不起作用。

 function showStudents() {

    var currentURL = window.location.origin;

    $.ajax({ url: currentURL + '/api/students', method: 'GET'})
    .then(function(studentData) {

          console.log("------------------------------------");
          console.log("URL: " + currentURL + "/api/students");
          console.log("------------------------------------");

          // Here we then log the NYTData to console, where it will show up as an object.
          console.log(studentData);
          console.log("------------------------------------");


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


        var studentSection = $('<div>');
          studentSection.addClass('card');
          studentSection.attr('id', 'studentCard-' + i);
          studentSection.attr('style', 'width:25rem');
          $('#studentSection').append(studentSection);
          $('#studentCard-' + i ).append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>');
          $('#studentCard-' + i ).append('<ul class="list-group list-group-flush>');
          $('#studentCard-' + i ).append('<li class="list-group-item"><h5>Parent(s):</h5>' + studentData[i].parent1 + ' & ' + studentData[i].parent2 +' </li>');
          $('#studentCard-' + i ).append('<li class="list-group-item">' +  'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
          $('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
          $('#studentCard-' + i ).append('</ul>');
          $('#studentCard-' + i ).append('</div>');  

      }
    });
  }

Answer 1

听起来好像是parent1或parent2属性可能不存在，而contact1或contact2属性却不存在。测试整个响应是否为空没有意义-只需检查这些属性即可。例如：

for (var i = 0; i < studentData.length; i++ ) {
  var studentSection = $('<div>');
  studentSection.addClass('card');
  studentSection.attr('id', 'studentCard-' + i);
  studentSection.attr('style', 'width:25rem');
  $('#studentSection').append(studentSection);
  $('#studentCard-' + i ).append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>');
  $('#studentCard-' + i ).append('<ul class="list-group list-group-flush>');

  // Start of changes
  const parentStr = [studentData[i].parent1, studentData[i].parent2].filter(Boolean).join(' & ');
  $('#studentCard-' + i ).append('<li class="list-group-item"><h5>Parent(s):</h5>' + parentStr +' </li>');
  if (studentData[i].contact1) {
    $('#studentCard-' + i ).append('<li class="list-group-item">' +  'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
  }
  if (studentData[i].contact2) {
    $('#studentCard-' + i ).append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
  }
  // End of changes

  $('#studentCard-' + i ).append('</ul>');
  $('#studentCard-' + i ).append('</div>');  

}

您的脚本结构也可以得到改善-除非每张卡的id特别重要，否则对每个元素使用class而不是唯一的id会更有意义，或者，如果仅使用它来选择新创建的容器，则可以完全不使用它。您已经有了对使用studentSection创建的元素的引用，因此只需再次引用该变量即可。您还可以使用方法链接来减少语法干扰：

CSS：

.card {
  width: 25rem;
}

（这使您不必手动设置JS中每个已创建元素的width）

JS循环：

for (var i = 0; i < studentData.length; i++ ) {
  var studentSection = $('<div>');
  $('#studentSection').append(studentSection);
  const parentStr = [studentData[i].parent1, studentData[i].parent2].filter(Boolean).join(' & ');
  studentSection.addClass('card')
    .append('<div class="card-header"><h3>' + studentData[i].firstName + ' ' + studentData[i].lastName + '</h3></div>')
    .append('<ul class="list-group list-group-flush>')
    .append('<li class="list-group-item"><h5>Parent(s):</h5>' + parentStr +' </li>');
  if (studentData[i].contact1) {
    studentSection.append('<li class="list-group-item">' +  'phone: ' + studentData[i].contact1 + '<br> email: ' + studentData[i].email1 + '</li>');
  }
  if (studentData[i].contact2) {
    studentSection.append('<li class="list-group-item">' + 'phone: ' + studentData[i].contact2 + '<br> email: ' + studentData[i].email2 + '</li>');
  }
  studentSection.append('</ul>');
    .append('</div>');  

}

（或者，甚至更好的是，使用模板文字）

如何从ajax调用中过滤null或未定义的值？

1 个答案: