Angular JS loading data field value from an asynchronous http request

Question

I have implemented ng-repeat to create a table including the paging and all, data source for that table is coming from SharePoint REST API.

I am facing a challenge because on of the fields that I need to show in the ng-repeat data source have a link, but I need to extract the data from that URL. I don't know if I am able to convey the problem statement or not. Let me try with an example

Let's say we have a data source, array of object SearchResult it has few properties, like:

SearchResult.ID

SearchResult.ReferenceNumber

SearchResult.CreatedBy

SearchResult.Files //This Files attribute in the object is a link to a page which contains JSON/XML information about the files. I need to extract that information and show the extracted files links instead of a link to this page.

Please let me know is there any way I can send an async call to get json/xml for this particular field within ng-repeat.

$scope.GetFileNames =function(query)
{

    var returndata;
     $http({
        method: 'GET', url: query,
        headers: { "Accept": "application/json;odata=verbose" }
    }).
    success(function (data, status, headers, config) {
      debugger;
           returndata= data;
        }).
    error(function (data, status, headers, config) {
        debugger;
        // called asynchronously if an error occurs
        // or server returns response with an error status.
            returndata= data
    });
    return returndata;
}


<td>
   <span>{{GetFileNames(history.Files)}}</span>
</td>

AakMu · Accepted Answer · 2015-06-08 08:06:00Z

So this is how I had to implement the given functionality. It's not entirely based on angular js I had to use jquery as well to get to this workaround.

First we need to create a directive a ng-click event registered it with

appSearch.directive('myPostRepeatDirective', function(){ 

 return function(scope, element, attrs) {

    if (scope.$last){
      // iteration is complete, do whatever post-processing
      // is necessary
      setTimeout(function () {

          $('[name="fileNames"]').click()
         }, 200);

    }
  };
});


$scope.GetFileNames =function(query, element,$event)
    {
        var tar = event.target;
        var returndata;
         $http({
         method: 'GET', url: query,
             headers: { "Accept": "application/json;odata=verbose" }
         }).
         success(function (data, status, headers, config) {
             var files = "<ul>"
             if(data.d.results.length > 0){


           angular.forEach(data.d.results,function (file) {

                   files += "<li> <a href='"+file.ServerRelativeUrl +"' target='_blank'>"+file.Name+" </a> </li>"

                });

             }
             files += "</ul>"
             $(tar).html(files);
             }).
        error(function (data, status, headers, config) {


         });
         return returndata;
    }





 <tr ng-repeat="history in HistoryItems" my-post-repeat-directive="foo()" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)"  >
                                    <td>
                                        <span><a ng-href="" class="link" ng-click="ChangeIframeUrl($index, history.ListItemId, history.Path)">{{history.RetailReferenceNo}}</a></span>
                                    </td>
                                    <td>
                                        <span ng-if="history.RetailTitle == ''">{{history.RetailTitle}}</span> <span>{{history.RetailTitle}}</span>
                                    </td>

                                    <td>
                                        <span> {{history.RetailDocumentDate | date: 'dd-MMM-yyyy'}}</span>
                                    </td>
                                    <td><span>{{history.Created | date: 'dd-MMM-yyyy'}} </span></td>
                                    <td>
                                        <span>{{history.Author}} </span>
                                    </td>
                                    <td>
                                        <span>{{history.RetailStatus}} </span>
                                    </td>
                                    <td>
                                        <span>{{history.RetailRevision}} </span>
                                    </td>
                                    <td>
                                        <span name="fileNames" ng-click="GetFileNames(history.Files, this)"></span>
                                    </td>
                                    </tr>

lastr2d2 · Accepted Answer · 2015-06-08 05:21:54Z

0

Expose a method in the controller to get remote data by the link, something like "GetRemoteFile", then use {{GetRemoteFile(SearchResult.Files)}} in the view.

$scope.GetRemoteXML = function(endpoint){
    // use $resource or $http to get xml/json
}

and then

<li ng-repeat="item in items">
    {{GetRemoteXML(item.link)}}
</li>

edited Jun 8, 2015 at 5:21

answered Jun 8, 2015 at 5:07

lastr2d2

4,0243 gold badges27 silver badges43 bronze badges

4 Comments

AakMu Over a year ago

Thank you for your prompt reply, this is exactly what I did but somehow this hangs the browser window... It keeps calling that function and an empty string is returned since the function executes as async it returns the variable without getting into success or anything.

lastr2d2 Over a year ago

can you put the function/related code in the question?

lastr2d2 Over a year ago

try return $http(...) itself

AakMu Over a year ago

$http.get(query). tried this just now but shows the same behavior, it gets stuck in a loop. Keeps calling the function

Collectives™ on Stack Overflow

Angular JS loading data field value from an asynchronous http request

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related