0

Below is my code, obviously it isn't going to Run because I have external sources that I am pulling from. My main issue is that I can't get the listItemInfo from onQuerySucc to display in the table in the buildTable function. Does anyone know how I can do that? I have it working when I populate the array itself, but I don't want to do it that way.

After onQuerySucc(data) runs, it displays the list item information it pulled like so:

Name: Deacon Landen – Age: 34 - Position: Jr. Developer - Office: Charleston- Education: UVA - Degree: Law

How can I get that to populate to my table so I do not have to manually populate the employees array?

<div> 
   <input id="btnSubmit" type="button" data-dpmaxz-eid="45" value="Click Here for EmployeeInfo"/>&#160;<br/></div> 
<div id="divResults">​​​<br/></div>
<br>
<div> 
   <input id="btnSubmit1" type="button" data-dpmaxz-eid="45" value="Click Here for Table View"/>&#160;<br/></div> 
<div id="tblResults">​​​<br/></div>

<script src="/jquery-3.3.1.min.js"></script>
<script src="/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="/dataTables.bootstrap4.min.css">
<br>

<script> 
    $(function () {
      $("#btnSubmit").on("click", function () {
      getListData();
      });
    });

    function getListData() {
    var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";
      
      $.ajax({
        url: fullUrl,
        type: "GET",
        dataType: 'json',
        headers: {
        "accept": "application/json;odata=verbose",
        },
          success: onQuerySucc,
          error: onQueryFlop
      });
      
    }
    function onQuerySucc(data) {
    var listItemInfo = "";
      $.each(data.d.results, function (key, value) {
      listItemInfo += '<b>Name:</b> ' + value.Title + ' – <b>Age:</b> ' + value.Age + ' - <b>Position:</b> ' + value.Position + ' - <b>Office:</b> ' + value.Office + ' - <b>Education:</b> ' + value.Education + ' - <b>Degree:</b> ' + value.Degree + '<br/>';
      });
      //something similar for the buildTable function
      $("#divResults").html(listItemInfo);
      alert('Successfully pulled list items');
    }
    function onQueryFlop() {
      alert('Error! Could not read list items');
    }
    
    $(function () {
      $("#btnSubmit1").on("click", function () {
      buildTable();
      });
    });
    
    function buildTable(data) {
        var employees = new Array();
            employees.push(["Name", "Age", "Position","Office","Education","Degree"]);
            employees.push(["Zach Goforth", "22", "Intern","Stafford","Alabama","General Business"]);
            employees.push(["George Fisher", "23", "Intern","Stafford","Virginia Tech","Engineering"]);
            employees.push(["Deacon Landen", "34", "Jr. Developer","Stafford","UVA","Law"]);
            employees.push(["Leon Brooklyn", "19", "Intern","50 Tech","Richmond","Civil Engineering"]);
            employees.push(["Dederick Dell", "26", "Sr. Developer","50 Tech","Georgia","Electrical Engineering"]);
            employees.push(["Jojo Vincent ", "46", "Chief Financial Officer","Stafford","Ole Miss","Business Admin"]);
            employees.push(["Nelly Jerred", "41", "Program Analyst","50 Tech","Columbia","Computer Science"]);
            employees.push(["Brendan Diaz", "46", "Chief Operating Officer","Stafford","Alabama","MIS"]);
 
            //Create a HTML Table element.
            var table = document.createElement("TABLE");
            table.border = "1";
 
            //Get the count of columns.
            var columnCount = employees[0].length;
 
            //Add the header row.
            var row = table.insertRow(-1);
            for (var i = 0; i < columnCount; i++) {
                var headerCell = document.createElement("TH");
                headerCell.innerHTML = employees[0][i];
                row.appendChild(headerCell);
            }
 
        //Add the data rows.
        for (var i = 1; i < employees.length; i++) {
            row = table.insertRow(-1);
            for (var j = 0; j < columnCount; j++) {
                var cell = row.insertCell(-1);
                cell.innerHTML = employees[i][j];
            }
        }
 
        var tblResults = document.getElementById("tblResults");
        tblResults.innerHTML = "";
        tblResults.appendChild(table);
        alert('Successfully displayed items in Table Format');
    }

    

</script>
2
  • Looks like a JS question. You need to build your employees array in onQuerySucc and then call buildTable within that function. I may post an answer if really needed.
    – Salah
    Jul 29 '20 at 7:37
  • @user92012, did the code snippet below work for you ? Please check and feel free to reply.
    – Jerry
    Aug 3 '20 at 8:36
0

Please refer the following demo, just need to loop the items data and generate and append to the element:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
$("#btnGetTrainingRequests").click(function(){
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TrainingRequests')/items";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
var items = data.d.results;
var fullResults = '<table id="tableCars" style="width:100%" border="1 px"><thead><tr><td><b>Title</b></td>' + '<td><b>Course</b></td>'+ '<td><b>TrainingType</b></td>' +'<td><b>Comments</b></td>' + '</tr></thead><tbody>';
for (var i = 0; i < items.length; i++) {
fullResults += '<tr>';
fullResults += '<td>' + items[i].Title + '</td>';
fullResults += '<td>' + items[i].Course + '</td>';
fullResults += '<td>' + items[i].TrainingType + '</td>';
fullResults += '<td>' + items[i].Comments + '</td>';
fullResults += '</tr>';
}
$('#resultsTable').append(fullResults);
}
function onError(error) {
alert('Error');
}
});
});
</script>
<input type="button" id="btnGetTrainingRequests" value="Get All Training Requests"/>
<br/><br/>
<table id='tableCars' style="width: 100%;" border="1 px">
<tr>
<td>
<div id="resultsTable" style="width: 100%"></div>
</td>
</tr>
</table>

Reference:

How to bind SharePoint Online list data using HTML and jQuery table using Rest API

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.