How to retrieve a Sharepoint list item with Rest api and show it in a new div

Question

this is the first time I write in this forum so please tell me if I do something wrong. I can not get this to work, does anyone know what is wrong in the code below. Thanks/

$(document).ready(function(){
    $( ".mainSection" ).before( "<div id='overTopnav'></div>" );
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Nyheter')/items?$select=Title,Body&$filter=Visa eq 'Ja'";,
        type: "GET",
        headers: {"Accept": "application/json;odata=verbose"},

        success: function(data){
            //console.log(data);
            var items = '<ul id="driftItems">';
            $.each(data.d.results, function(){
                items +='<li class="driftItem">' + this.Title + this.Body + '</li>';
            });
            items += "</ul>";

            $("#overTopnav").html(items);
        },
        error: function(driftError){
            console.log(driftError);
        }
    });                         
});

I don't see any syntax errors, are you getting an error? Can you describe more whats wrong is happening? — Thales Chemenian, Nov 07 '16 at 16:25
Remove the ; after the "/_api/Web/Lists/GetByTitle('Nyheter')/items?$select=Title,Body&$filter=Visa eq 'Ja'" in the urkl property of ajax request — Unnie, Nov 07 '16 at 16:38

Unnie · Answer 1 · 2018-03-23T11:56:56.817

You have a Semi-colon (;) after your Url attribute in your Ajax request which is syntactically incorrect.

Below is a working sample for your reference:

  $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('List display name')/items?$select=Title,Created&$filter=Status eq 'Open'",
            type: "GET",
            headers: {"Accept": "application/json;odata=verbose"},        
            success: function(data){
               $.each(data.d.results, function(){
                    console.log(this.Title + this.Created);
                });                
            },
            error: function(errorMsg){
                console.log(errorMsg);
            }
        });

Also a cleaner way to write asynchronous code is by using Deferred and promise pattern . Below is a sample for you to start with:

 function getListData() {
   return $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Nyheter')/items?$select=Title,Body&$filter=Visa eq 'Ja'",
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" }
    });
}

$(document).ready(function () {
    $(".mainSection").before("<div id='overTopnav'></div>");
    getListData().then(function (data) {
        //success code here 
        var items = '<ul id="driftItems">';
        $.each(data.d.results, function () {
            items += '<li class="driftItem">' + this.Title + this.Body + '</li>';
        });
        items += "</ul>";
        $("#overTopnav").html(items);
        }).fail(function (error) {
            console.log(error);
        });
    });

score 1 · Answer 2 · answered Nov 07 '16 at 20:11

Note:

       var items = '<ul id="driftItems">';
        $.each(data.d.results, function(){
            items +='<li class="driftItem">' + this.Title + this.Body + '</li>';
        });
        items += "</ul>";

Is good old jQuery for cases when some JavaScript wasn't supported yet in all browsers.

The Map method on an Array is standard since IE9 finally supported it: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Modern native JavaScript (without the need for jQuery) would be:

    var items = '<ul id="driftItems">'
        + data.d.results.map(function (item) {
            return '<li class="driftItem">' + item.Title + item.Body + '</li>';
        }).join('') + '</ul>';

You can do join('\n') to add linebreaks and pretty print the HTML in the Browser View Source

Native .map runs way faster then jQuerys each function

There is also a native .forEach .. but that can't be chained!

How to retrieve a Sharepoint list item with Rest api and show it in a new div

2 Answers2