HTML from SharePoint List data

Question

How can I write a script that would get data from a SharePoint List column so I could use it in an HTML page

Is there a JS library out there that I could use, if so, what is it and where can I get it?

For example:

If I had a SharePoint site named "SiteName" and a SharePoint list that I named "ContactsTest" that had fields/columns named "First Name", "Last Name", "Location", ect. and I wanted to get the value of "First Name" and display it in my HTML page using JS. How would I implement this?

Answer 1

There are multiple ways to achieve this however you can check the below one. You need to get list items using JavaScript and then populate in HTML.

var siteUrl = '/sites/MySiteCollection';

function retrieveListItems() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + 
            '\nTitle: ' + oListItem.get_item('Title') + 
            '\nBody: ' + oListItem.get_item('Body');
    }

    alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Source: https://msdn.microsoft.com/en-us/library/office/hh185007(v=office.14).aspx

Here is another nice article that you can check. You may need to change the variables according to your list and site names etc.

Hope it helps.

Answer 2

No need to start from scratch with coding... that will be a long learning path

Microsoft developed CSR - Client Side Rendering, (since SP2013) Where you can use JavaScript to rewrite the SharePoint (HTML) output to anything your JavaScript skills let you do.

The (Chrome) Browser Extension Cisar editor is a WYSYWIG editor that gives you all the JavaScript boilerplate code and takes care of adding the JS files (with JSLink) to WebParts/Views.

The CSR (my many incorrectly called JSLink) example that matches your question is:

https://code.msdn.microsoft.com/office/Client-side-rendering-code-ccdb2a0e

---

CSR = The JavaScript that rewrites SharePoint data

JSLink = is the property of a WebPart that loads your CSR file

Remember:

The (Chrome) Browser Extension Cisar editor is a WYSYWIG editor that gives you all the JavaScript boilerplate code and takes care of adding the JS files (with JSLink) to WebParts/Views.