0

I am using an ajax call to get elements of multiple sharepoint list choice(checkboxes) columns called "Orbit", "SD",.... to create google pie charts for each column:

data.d.results.forEach(function(row) {
    // each row
    row.Orbit.results.forEach(function(choiceOrbit) {
        // each choice of Orbit of single row
        if (countOrbit.hasOwnProperty(choiceOrbit)) {
            countOrbit[choiceOrbit] += 1;
        } else {
            countOrbit[choiceOrbit] = 1;
        }
    });

But if one row in the column is empty, I get an error:

Uncaught TypeError: Cannot read property 'results' of null
at Statistics.aspx:658
at Array.forEach (<anonymous>)
at Object.success (Statistics.aspx:632)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

How can i add an if(), so that an empty item will be neglected in the counting? Something like:

if(row.Orbit.results.forEach!=null)

or

 if(data.d.results.length > 0)
  {
    // Add your code

  }

or

if(row!=null)

doesnt work

EDIT: my full code is:

<html>
<head>

<script src="https://www.gstatic.com/charts/loader.js" type="text/javaScript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javaScript"></script>
<script type="text/javaScript">
    $(document).ready(function () {
    var tempArray = [];
    var chartObj = [['Orbit', 'Number']];

AjaxCall(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('list')/items", function (data) {

    var countOrbit = {};
    var countSD = {}; 
    var countMT = {}; 
    var countIT = {}; 
    var countAI = {}; 


    data.d.results.forEach(function(row) {
        // each row
        row.Orbit.results.forEach(function(choiceOrbit) {
            // each choice of Orbit of single row
            if (countOrbit.hasOwnProperty(choiceOrbit)) {
                countOrbit[choiceOrbit] += 1;
            } else {
                countOrbit[choiceOrbit] = 1;
            }
        });
        row.SD.results.forEach(function(choiceSD) {
            // each choice of Orbit of single row
            if (countSD.hasOwnProperty(choiceSD)) {
                countSD[choiceSD] += 1;
            } else {
                countSD[choiceSD] = 1;
            }
        });
        row.MT.results.forEach(function(choiceMT) {
            // each choice of MT of single row
            if (countMT.hasOwnProperty(choiceMT)) {
                countMT[choiceMT] += 1;
            } else {
                countMT[choiceMT] = 1;
            }
        });
        row.IT.results.forEach(function(choiceIT) {
            // each choice of IT of single row
            if (countIT.hasOwnProperty(choiceIT)) {
                countIT[choiceIT] += 1;
            } else {
                countIT[choiceIT] = 1;
            }
        });
        row.AI.results.forEach(function(choiceAI) {
            // each choice of IT of single row
            if (countAI.hasOwnProperty(choiceAI)) {
                countAI[choiceAI] += 1;
            } else {
                countAI[choiceAI] = 1;
            }
        });
    });

    // Load Charts and the corechart package.
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(function(){drawAllCharts(countOrbit, 'Orbit')});
    google.charts.setOnLoadCallback(function(){drawAllCharts(countSD, 'SD')});
    google.charts.setOnLoadCallback(function(){drawAllCharts(countMT, 'MT')});
    google.charts.setOnLoadCallback(function(){drawAllCharts(countIT, 'IT')});
    google.charts.setOnLoadCallback(function(){drawAllCharts(countAI, 'AI')});


    // Function for all Charts

    function drawAllCharts(countChoices, name) {
        var rows = [];
        for (var property in countChoices) {
            if (countChoices.hasOwnProperty(property)) {
                rows.push([property, countChoices[property]]);
            }
        }


        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string', 'Type');
        datatable.addColumn('number', 'Quantity');
        datatable.addRows(rows);
        var options = {
            title: String(name),
            is3D: 'true'
        };
        var chart = new google.visualization.PieChart(document.getElementById(String(name)));
        chart.draw(datatable, options);
    }
    // End of function to draw charts


});
});
                function AjaxCall(url, success) {
                    $.ajax({
                        url: url,
                        type: "GET",
                        headers: {
                            "accept": "application/json;odata=verbose",
                        },
                        success: success,
                        error: function (error) {
                            console.log(JSON.stringify(error));
                            alert('Something Went Wrong');
                        }
                    });
                }
</script>
</head>
  <body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <tr>
        <td><div id="Orbit" style="width:700px;height:500px;"></div></td>
        <td><div id="SD" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="MT" style="width:700px;height:500px;"></div></td>
        <td><div id="IT" style="width:700px;height:500px;"></div></td>
        <td><div id="AI" style="width:700px;height:500px;"></div></td>
      </tr>
    </table>
  </body>
</html>
0

Do a check with

if(row.Orbit!=null){
}

i think it will solve the issue as your Error Description itself suggested "Cannot read property 'results' of null" so when it got Error occurred row.Orbit was null.

  • this results in the same error. i think only one element is null not the whole – Fabian M Oct 9 '18 at 12:52
0

You can filter the empty values out of Orbit column in the REST URL:

var oDataUrl = siteUrl + "/_api/web/lists/GetByTitle('Listname')/items?$top=5000&$Select=ColumnA,ColumnB,ColumnC,Orbit,ID&$filter=(Orbit ne '')";

Updated: To filter multiple columns, refer below REST URL:

var oDataUrl = siteUrl + "/_api/web/lists/GetByTitle('EmpData')/items?$top=5000&$Select=Country,EMPScore,Department,TechSkill,State,years,Result,ID&$filter=((Country eq 'USA')or(EMPScore eq '500')or(Department eq 'HR')or(TechSkill eq 'CRM')or(State eq 'LA'))and(years eq '27')and(Result eq '')"
  • thanks. can you explain me ab bit more what &$filter=(Orbit ne '') does? What is ne? Is there documentation? – Fabian M Oct 10 '18 at 8:34
  • $filter is used to filter the data of the list based on column names (in your case "Orbit" column) and ne means 'not equals'. [docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/… MSDN) Please don't forget to upvote and mark the answer as accepted in case it helped you! – Sohail Shaikh Oct 10 '18 at 8:44
  • ok and how can I get multiple columns were not only the Orbit column, which is not empty, is displayed – Fabian M Oct 10 '18 at 8:49
  • @FabianM I have added a REST URL to filter multiple columns. You can use ODate query operators in the filter based upon your conditions and requirement. – Sohail Shaikh Oct 10 '18 at 9:12
  • sorry, even with the filter i get: Internal Statistics.aspx:667 Uncaught TypeError: Cannot read property 'results' of null – Fabian M Oct 10 '18 at 9:19
0

The user Mikel gave me the solution:

data.d.results.forEach(function(row) {
  // each row
  if (row.hasOwnProperty('Orbit') && row.Orbit != null) {
    row.Orbit.results.forEach(function(choiceOrbit) {
      // each choice of Orbit of single row
      if (countOrbit.hasOwnProperty(choiceOrbit)) {
          countOrbit[choiceOrbit] += 1;
      } else {
          countOrbit[choiceOrbit] = 1;
      }
    });
  }
});

The solution was

 if (row.hasOwnProperty('Orbit') && row.Orbit != null) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.