Skip to main content

How to get Data from a SharePoint list REST API using JavaScript?

Fetch Data from a SharePoint list Using JavaScript:

Just run the snippet code on you SharePoint page (Create a list Name Citizen on you SP site with required fields.columns):

<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 be =


Comments

Post a Comment

Popular posts from this blog

How to update values in a custom multi lookup field Field (table) of MS Project using JavaScript/jQuery?

  Updating values in the custom multi lookup field Field of MS Project using JavaScript/jQuery: First of all we need to know the steps to update/add details in a Project of Project Server  Step 1: CheckOut a Project Step 2: Update detals in same as in Step 1 Project Step 3: Publish a Project Step 4: CheckIn a Project We always in need to follow the above steps to update any Project to MS Project/Project Server. Same we need to follow in code too.    //Step 1: First, we need to define all the required functions, the below Functions are callback functions             window.checkOutPWAProject = function (projectId, callBack) {                 var checkOutURL = _spPageContextInfo.webAbsoluteUrl + "/_api/ProjectServer/Projects('" + projectId + "')/checkOut()";                 $.ajax({                     url: chec...
Post a Comment
Read more

How to get all site users of SharePoint using REST API?

Get all users of SharePoint site using REST API: These users and its data are required to update people field of a SharePoint list. By using below snippet code we can able to get details of a user of SharePoint site.     var webURL = _spPageContextInfo.webAbsoluteUrl+"/_api/Web/SiteUsers";         $.ajax({           url: customFieldURL,           method: "GET",           headers: {             "Accept": "application/json; odata=verbose"           },           success: function (data) {            console.log(data);             data.d.results.forEach(function(cm){                     console.log(cm.Title+" - "+cm.Email+" - "+cm.Id);             });      ...
Post a Comment
Read more

How to trigger a MS Flow Using Jquery/JavaScript?

Trigger a  MS Flow Using jQueryuery/JavaScript: To trigger an MS Flow first we need to create an workflow. Next we need to obtain its URL for triggering it. In below example, we are starting a workflow which is taking email address, email subject and email body as parameter and sending mail to email of related user. //This function triggers the microsoft flow  function beginMSFlow() {          var httpPostUrl = "obtain URL from MS flow";          var postData = {              emailadress:'raju@testdev.com', // Object keys must be similar as you used in the MS flow             emailSubject:'Testing Raju',              emailBody:'Hello User\n Welcome, You just trigger a MS Flow'             };           $.ajax({           url: httpPostUrl,    ...
Post a Comment
Read more