未捕获的TypeError:无法读取AJAX对象上未定义的属性“映射”

时间:2020-06-15 19:25:05

标签: javascript jquery pnp-js

如果没有结果,是否可以默认输入N / A?如果标题上的映射对象为空,我希望能够将其定义为“ N / A”。

Media_x0020_Specialist_x0028_s_x.results下的某些项目返回,但是随后某些项目没有返回,并且出现了该错误。

代码:

  $.ajax({
    url: requestUri,
    type: "GET",
    dataType: "json",
    cache: false,
    headers: {
      accept: "application/json; odata=verbose"
    },
    success: function success(data) {
      onSuccess(data);
      ExportTable();
    }
  });

  function onSuccess(data) {
    var item = data.d.results;
    for (var i = 0; i < item.length; i++) {
      tableContent += "<tr>";
      tableContent +=
        "<td>" +
        item[i].Franchises_x0020_with_x0020_Shar.results
          .map(function(r) {
            return r.Title;
          })
          .join("; ") +
        "</td>";
      tableContent +=
        "<td>" + item[i].Stand_x0020_Alone_x0020_Franchis + "</td>";
      tableContent +=
        "<td>" +
        item[i].Franchise_x0020_Liason.results
          .map(function(r) {
            return r.Title;
          })
          .join("; ") +
        "</td>";


      tableContent +=
        "<td>" +
        item[i].Media_x0020_Specialist_x0028_s_x.results
          .map(function(r) {
            return r.Title;
          })
          .join("; ") +
        "</td>";

      tableContent += "</tr>";
      tableContent += "</tbody></thead>";
    }
    $("#title").append(tableContent);
  }

这是错误: enter image description here

2 个答案:

答案 0 :(得分:1)

您可以使用三元运算符并对每个项目重复此操作:

(item[i].Franchises_x0020_with_x0020_Shar.results ?          
   item[i].Franchises_x0020_with_x0020_Shar.results
      .map(function(r) {
          return r.Title;
      })
      .join("; ")
:
   "N/A")

我个人将其括在括号中,以使发生的情况更清晰(如上)。

或者,通过较新的javascript功能,您可以使用为解决此问题而创建的可选链接:

   item[i].Franchises_x0020_with_x0020_Shar?.results
          .map(({ Title }) => Title))
          .join("; ") 
   || "N/A"

答案 1 :(得分:0)

更多建议:您那里有很多重复的代码,使用+在javascript中连接字符串不如使用template literals那样可读。

这是一种更简洁,可读性强的解决方案,可以针对您可能拥有的其他数据进行重复:

$.ajax({
  url: requestUri,
  type: "GET",
  dataType: "json",
  cache: false,
  headers: {
    accept: "application/json; odata=verbose"
  },
  success: function success(data) {
    onSuccess(data);
    ExportTable();
  }
});


// we'll reuse this function each time we want to get a semicolon-separated list of titles
function getFranchiseTitles(franchises) {
  var noResultsMessage = 'N/A';

  // is "results" present on this object? does it have length?
  var hasResults = !!franchises.results && !!franchises.results.length;

  // only attempt map if there are results to map over
  return hasResults
    ? franchises.results.map(f => f.Title).join('; ')
    : noResultsMessage;
}


function onSuccess(data) {
  var results = data.d.results;

  // map over results, instead of using a for loop
  var tableRows = results.map(result => {

    // destructure & rename each result to get child results
    var {
      Franchises_x0020_with_x0020_Shar: shared,
      Stand_x0020_Alone_x0020_Franchis: standalone,
      Franchise_x0020_Liason: liason,
      Media_x0020_Specialist_x0028_s_x: specialist
    } = result;

    // get our titles from child objects
    var sharedTitles = getFranchiseTitles(shared);
    var standaloneTitles = getFranchiseTitles(standalone);
    var liasonTitles = getFranchiseTitles(liason);
    var specialistTitles = getFranchiseTitles(specialist);

    // return markup for this table row with titles inserted
    return `<tr>
      <td>${sharedTitles}</td>
      <td>${standaloneTitles}</td>
      <td>${liasonTitles}</td>
      <td>${specialistTitles}</td>
    </tr>`
  }).join('');

  // wrap with outer table tags
  var tableContent = `<table><tbody>${tableRows}</tbody></table>`;

  // insert into element
  $("#title").append(tableContent);
}