Make html page with Sharepoint REST result

Question

I'm new with javascript and HTML, so please be patient.

I'm trying to make very simple HTML page displaying text with value stored in sharepoint 2013 list.

I've made REST query in which I've item with value I want to display on other HTML page:

http://xxx/sites/something/_api/lists/getbytitle('test')/items(10)?$select=Osoba"

Result is in xml file stored in this section:

<m:properties><d:Osoba>John Max</d:Osoba></m:properties>

How can I put the value of item (John Max) on blank HTML page?

Answer 1

Add a header parameter in the ajax request:

headers: { "Accept": "application/json; odata=verbose" }

Or add a dataType parameter in the ajax request:

 dataType:"json"

Then the request will return values in JSON format, JSON format data is easy to process.

References:

1. jQuery Ajax parameter
2. JSON - Introduction

Answer 2

Here's working example to fetch list item and showing it's column value in label on DOM:

HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<label id="lblOsoba"></label>

JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        getListItem(_spPageContextInfo.webAbsoluteUrl);
    });

    function getListItem(siteUrl) {
        $.ajax({
            url: siteUrl + "/_api/lists/getbytitle('test')/items(10)?$select=Osoba",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                if(data.d) {
                    $("#lblOsoba").text(data.d.Osoba);
                } else {
                    $("#lblOsoba").text("Item not found!");
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

You can also download jQuery file --> Upload it to document library in SharePoint site and then add reference to it in your code instead of using CDN URL.

Answer 3

There are two techniques that will help you achieve your goal.

Getting data from REST API

The first is using XMLHttpRequest to access the REST API and return the result. The following code demonstrates a basic example.

var xhr = new XMLHttpRequest();
xhr.open("GET","http://xxx/sites/something/_api/lists/getbytitle('test')/items(10)?$select=Osoba",true);
xhr.setRequestHeader("accept","application/json; odata=verbose");
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            // request was successful
            var item = JSON.parse(xhr.responseText).d;
            console.log(item);
        }else{
            // something went wrong  
            alert(xhr.status + ":\n " + xhr.responseText);
        }
    }
};
xhr.send();

The above example just logs the result of the REST call to the JavaScript console in the browser.

Note that this code should be executed from an existing SharePoint page, so that the person running it is already authenticated. You can embed it on an existing SharePoint page via a Content Editor web part (using the script link property to specify the address of the file where you've added the code) or a Script Editor web part. There are other ways to embed code, such as custom actions or through masterpages and page layouts, but those two web parts are the easiest routes for someone just getting started.

Manipulating HTML via JavaScript

The second technique that you'll want to learn is how to manipulate HTML via JavaScript. This will allow you to take that REST result and programmatically insert the desired text/HTML onto the page on which the JavaScript is running.

There are several different methods of adding HTML to an existing element on a page. Your best bet is to use element.appendChild() or element.insertAdjacentHTML(). In either case, element is an existing HTML element on the page, which you can select using document.querySelector() and passing in a valid CSS selector as an argument. (Here's a useful CSS selector cheat sheet)

Here's an example that demonstrates some of the different ways you could programmatically insert text into the HTML page.

<script>
var xhr = new XMLHttpRequest();
xhr.open("GET","http://xxx/sites/something/_api/lists/getbytitle('test')/items(10)?$select=Osoba",true);
xhr.setRequestHeader("accept","application/json; odata=verbose");
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            // request was successful
            var item = JSON.parse(xhr.responseText).d;
            var osoba = item["Osoba"];
            addTextToPage(osoba);
        }else{
            // something went wrong  
            alert(xhr.status + ":\n " + xhr.responseText);
        }
    }
};
xhr.send();

function addTextToPage(text){
    // add directly to page (not recommended)
    // document.write(text);

    // create an element and add as text inside element
    var div = document.body.appendChild(document.createElement("div"));
    div.appendChild(document.createTextNode(text));

    // add inside an existing element - method 1
    document.querySelector("body").appendChild(document.createTextNode(text));

    // add inside an existing element - method 2
    document.querySelector("body").insertAdjacentHTML("beforeend",text);

    // add inside an existing element - method 3
    document.querySelector("body").insertAdjacentHTML("afterbegin",text);

    // add outside an existing element - method 1
    document.querySelector("body > div").insertAdjacentHTML("afterend",text);

    // add outside an existing element - method 2
    document.querySelector("body > div").insertAdjacentHTML("beforebegin",text);
}
</script>

Note that the first technique in the example, document.write() is not recommended because it essentially replaces the current page with whatever text you give it. You're usually better off manipulating the existing page using any of the subsequent methods listed above. I've commented that line out so that you don't accidentally add it to a Script Editor web part and then find it impossible to get back in to edit the code.

In case you mess up...

If you do accidentally add code to a page that makes it impossible for you to get back in to change it, you can add the query string parameter contents=1 to the page address in your browser (i.e. yourpageurl.aspx?contents=1) to open the "web part maintenance page" where you can see the list of web parts on the page and close the one that's causing the problem.