Uncaught TypeError: Cannot read property 'map' of undefined on AJAX object

Question

Is there a way that I can pass in N/A as default if there is no results? I want to be able to define it as "N/A" if the mapped object is empty on Title.

Some of the items under Media_x0020_Specialist_x0028_s_x.results return, but then some items are not returning and I'm getting that error.

Code:

  $.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);
  }

Here is the error:

Some of the items in the JSON don't have `results`. – Barmar Jun 15 '20 at 19:32 — Barmar, Jun 15 '20 at 19:32

Dylan Kerler · Accepted Answer · 2020-06-15T21:18:09.687

1

You can use a ternary operator and repeat this for each item:

(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")

Personally, I would wrap it in parenthesis to make it clearer what is going on (like above).

Alternatively, with the newer javascript features you can use optional chaining which was created to address this very problem:

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

edited Jun 15 '20 at 21:18

answered Jun 15 '20 at 19:32

Dylan Kerler

2,007
1
8
23

Worked like a charm! Thanks @Dylan, I didn't know that I could do that on object like this also. – Tripp Jun 15 '20 at 19:42
Yes, ternaries are very powerful. However, be careful since they can trip you up sometimes since this implicitly checks against javascript's truthy values - it might be better to do item[i].Franchises_x0020_with_x0020_Shar.results !== undefined ? for additional safety guarantees. – Dylan Kerler Jun 15 '20 at 19:49

score 0 · Answer 2 · answered Jun 15 '20 at 19:50

Further advice: you've got a lot of repeated code there, and concatenating strings in javascript using + is not as readable as doing so with template literals.

Here's a solution that's more concise, readable, and can be repeated for other data you might have:

$.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);
}

Uncaught TypeError: Cannot read property 'map' of undefined on AJAX object

2 Answers2