data from component to view (Angularjs)

Issue

I am sure this is something simple, but I cannot seem to pass information from a component to a view. I search for this on stackoverflow and google but could not find a solution.

Here is the javascript component call to the API, which prints the information to the console,

component.js

$ctrl.getInformation = function() {
    // call php controller.
    // return audits for html file.
    $http.get(`path/to/getInformation/${$ctrl.path.idTo}`).then(function(responseState) {
        console.log('sucessfull callback from server', responseState.data);
        return responseState.data;
    });
}

View template.html file:

<tr ng-repeat="i in vm.getInformation">
    <td> {{ vm.getInformation().data[i].Date }}</td>
    <td> {{ vm.getInformation(responseState.data[i].Date) }} </td>
</tr>

Can anyone show me why is it not rendering the information from the component to the template file?

Solution

You need to assign your fetched data to a $scope variable or a variable in the controller then you can loop it. In your controller you need to change your code to

$ctrl.information = [];

$ctrl.getInformation = function() {
  
    $http.get(`path/to/getInformation/${$ctrl.path.idTo}`).then(function(responseState) {
        console.log('sucessfull callback from server', responseState.data);
        $ctrl.information = responseState.data;
    });
}

Then in your html

<tr ng-repeat="data in vm.information">
    <td> {{ data.Date }}</td>
    <td> {{ data.whatever) }} </td>
</tr>

Answered By - Risalat Zaman