Javascript & Sharepoint: Populate table with variables values

Question

I have various lists on our sharepoint site. One list is named "LD". I am trying to create a simple table that counts the records and sums the cost in this list. However I am stuggling with the script to populate the table with the variable values (Icount, SumPrices) at the very bottom. Where am I going wrong? I can fetch the values (ie: 252, and $352,000) respectively as demonstrated at the top of my script (just a text). I just can't seem to put the values in my table. The 2nd and 3rd columns are BLANK

<p id="SumPrices">352662</p>
<p id="Icount">252</p>

 <table border="10" cellspacing="10" cellpadding="2"> 
  <tbody>
  <tr>
     <th scope="col"> Fiscal </th>
     <th scope="col"> Courses </th>
     <th scope="col"> Cost </th>
     <th scope="col"> Comment </th>
  </tr>
  <tr>
     <td> 2019-20 </td> 
     <td id="Icount"></td>
     <td id="SumPrices"></td>
     <td> Something </td> 
  </tr> 
</tbody>
</table>... 
<script>


<script type="text/javascript">
var listName = 'LD';
var xhr = new XMLHttpRequest();
xhr.open('GET', _spPageContextInfo.webAbsoluteUrl + 
    '/_api/web/lists/GetByTitle(\'' + listName + '\')/items? 
    $select=Cost&$top=1000');
xhr.setRequestHeader('Accept', 'application/json; odata=verbose');
xhr.onload = function(){
    if (xhr.status === 200) {
        var results = JSON.parse(xhr.responseText);
        results = results.d.results;

        var sum = 0;
        for (var i = 0; i < results.length; i++){
            sum += results[i].Cost;
        }

        document.getElementById('SumPrices').innerText = sum;
    document.getElementById('Icount').innerText = i;
                }
    else {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send();
</script>

Would you be able to provide a bit more information about what goes wrong? For instance, are you able to successfully fetch the records and sum the costs, but unable to update the text of the count and prices cells, or is the problem related to fetching the records? — runar, Apr 14 '20 at 11:58
I can fetch the values (252 and $352,000 respectively) from my list. I just can't find a way to populate my table. My syntax is wrong. — user13251403, Apr 14 '20 at 13:48
Hi. I revised my coding as suggested. However the result is the same. I get blank values in my table. I added 2 lines at the top of my script to demonstrate that I can fetch the values. I just can't populate my table properly. Thanks! — user13251403, Apr 14 '20 at 14:24
Is the updated code in your question your actual code, or have you added/deleted parts of the code to post here? I ask because I see some issues with the current code: 1) You can only use an ID once (not both in the `p` element and in the table), and 2) you have an open ` — runar, Apr 14 '20 at 14:31
Hi. I didn't realize that I could only use id once. I just removed the p elements and everything works! Thank you — user13251403, Apr 14 '20 at 15:05

runar · Accepted Answer · 2020-04-14T14:10:02.090

The reason for your code not working is that the script is executing before the table is inserted into the page, so it is unable to find the cells to update.

You need to either move the script to after the table (or move the table to before the script), or use a function to wait for the page to finish loading. There are several ways to do the latter, some of then are described in this popular question.

Edit: If you want to read more about where to put JavaScript code, I recommend reading this question and the accepted answer as it explains everything in quite simple terms, and offers several solutions.

Javascript & Sharepoint: Populate table with variables values

1 Answers1