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

Question

我正在尝试为我 child 的类(class)创建一个简单的类(class)目录。我有一个 JSON 格式的学生数组，并为 child 的姓名和家长信息编写了一个 AJAX 调用。但有些人没有两个 parent 或两套联系信息？我尝试过“if (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< 会更有意义s 对于每个单个元素，或者如果您仅使用它来选择新创建的容器，则可以完全忽略它。您已经引用了刚刚使用 studentSection 创建的元素，因此只需再次引用该变量即可。您还可以使用方法链接来减少语法噪音:

CSS:

.card {
  width: 25rem;
}

(这将使您不必在 JS 中手动设置每个创建的元素的宽度)

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>');  

}

(或者，更好的是，使用模板文字代替)