Get Files from Document Library using angular js

Question

I want to develop a recent document widget using Angular js and REST api. Here is the code that I have:

    var spApp= angular.module('spng-App', []);  
    spApp.controller('spng-WebCtrl', function($scope, $http){  

        $http({  
            method: "GET",  
            url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/Lists/GetByTitle('Docwidget')/items?$select=Title,ID",  
            headers: {"Accept":"application/json;odata=verbose"}  
        }).success(function(Folderdata, status, headers, config){   
            $scope.Folders= Folderdata.d.results;   
        }).error(function (Folderdata, status, headers, config){  

        });         
    });

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<!-- Appel au fichiers JS -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
    <script type="text/javascript" src="/sites/Publishing/_catalogs/masterpage/Devcollabshareapp/app_test_Docs/ControlDocs.js"></script>
<!-- Fin Appel au fichiers JS -->


<style type="text/css">  
.files-table th{ background-color:#ddd; border:2px solid #fff; text-align:left}  
.files-table td{ background-color:#eee; border:2px solid #fff;}  
.web-heading{ padding:2px;}  
</style> 

</head>

<body>


<div ng-app="spng-App">  
<div ng-controller="spng-WebCtrl">

    <!-- Populate Files based on selected Folder -->  
    <table width="100%" cellpadding="10" cellspacing="2" class="files-table">  

            <tr>  
                <th>Title</th>  
                <th>ID</th>   
            </tr>  

            <tr ng-repeat="Folder in Folders">  
                <td><a href="{{Folder.ServerRelativeUrl}}">{{Folder.Title}}</a></td>  
                <td>{{Folder.Id}}</td>   
            </tr>  

    </table>  

</div>  
</div>

</body>
</html>

I have a library on Sharepoint 2013 called "Docwidget" and I want to recover the files it contains. Until then, I get to retrieve the titles and Id and not the other details, and in addition when I click on the file, it does not open. Is the problem in recovering the URL of the files? If not other proposals?

Rohit Waghela · Accepted Answer · 2016-12-14 13:44:21Z

1

Please try to use "_api/Web/GetFolderByServerRelativeUrl('/Docwidget')/files?$select=Author/Id,Author/Name,Author/Title,ServerRelativeUrl&$expand=Author".

It will give you "ServerRelativeUrl".

Please refer below screenshot for the REST response I got from both the way.

1. _api/Web/Lists/getbytitle('Document Library Name')/items

2. _api/Web/GetFolderByServerRelativeUrl('folderRelativeUrl')/files

3. _api/Web/GetFolderByServerRelativeUrl('folderRelativeUrl')/files?$select=Author/Id,Author/Name,Author/Title,ServerRelativeUrl&$expand=Author

edited Dec 14, 2016 at 13:44

answered Dec 13, 2016 at 15:44

Rohit Waghela

8743 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohit Waghela Over a year ago

Please try to use ?$select=Author/Id,Author/Name,Author/Title,ServerRelativeUrl&$expand=Author and you can get the required fields. Please check the updated answer.

Amira Manai · Accepted Answer · 2016-12-14 11:09:10Z

0

It's good it worked with this code : "/_api/web/GetFolderByServerRelativeUrl('/sites/Publishing/d‌ocwidget')/Files". Now I want to add the other details of the files: author, creation date, changed by ... will i need another query? Because with this request <td>{{Folder.Author}}</td> I recieve as a result {{.../_api/Web/GetFileByServerRelativeUrl('/sites/Publishing/docwidget/spring.docx')/Author"}} And not the name of the author ?

answered Dec 14, 2016 at 11:09

Amira Manai

12 bronze badges

1 Comment

Rohit Waghela Over a year ago

You can use $select to get the required fields. I have updated my answer accordingly. Please check and let me know.

Collectives™ on Stack Overflow

Get Files from Document Library using angular js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related