How to fetch data from REST API of a SharePoint list using JavaScript Promise/fetch method ?
Fetch the data from a list using JavaScript and create a table
Just the the snippet on your SharePoint site page
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
#htmTable {
width: 100%;
display: table;
border-spacing: 2px;
border-color: gray;
}
#htmTable,
thead,
tr,
tbody,
th,
td {
/* border: 1px solid #457; */
border-bottom: 1px solid #ddd;
border-collapse: collapse;
}
#htmTable th,
td {
padding: 8px 8px;
display: table-cell;
text-align: left;
vertical-align: top;
}
#htmTable thead {
color: white;
background-color: #1b1819;
}
#htmTable tbody tr:hover {
background-color: #dddddd;
}
.cFlags {
width: 20%;
height: 25%;
margin-left: 2px;
margin-right: 5px;
}
.txtBorder {
border-radius: 5px;
height: 30px;
width: 300px;
}
</style>
</head>
<body>
<table id="htmTable">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Mobile</th>
<th>Email</th>
<th>State</th>
</tr>
</thead>
<tbody id="bodyHtm">
</tbody>
</table>
<script>
function getDataFromSPList() {
var reqURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Citizens')/items";
var xhrData = {
method: 'GET',
headers: {
'Accept': 'application/json; odata=verbose'
},
}
fetch(reqURL, xhrData)
.then(function (response) {
if (response.ok) {
return response.json();
}
else {
throw new Error(response.json());
}
}).then(function (res) {
console.log('success');
var data = res.d.results;
var table = document.createElement('table');
var tbl = '';
data.forEach(d => {
tbl += '<tr>'
tbl += '<td>' + d.Title + '</td>';
tbl += '<td>' + d.City0 + '</td>';
tbl += '<td>' + d.Mobile + '</td>';
tbl += '<td>' + d.Email + '</td>';
tbl += '<td>' + d.State + '</td>';
tbl += '</tr>'
});
document.getElementById("bodyHtm").innerHTML = tbl;
}).catch(function (error) {
console.log('failure.');
console.log(error);
})
}
getDataFromSPList();
</script>
</body>
</html>
Output will look like
Comments
Post a Comment