olivier olivier - 4 months ago 19
AngularJS Question

Update angular View based on http request dynamically

I'm a beginner with angular and i'm trying to update a view based on a http request.

$scope.update = function(id){
switch (id) {
case 1:
$http.get(Backand.getApiUrl() + '/1/objects/details')
.then(function(response) {
$scope.details = response.data.data[0];
$rootScope.locName = response.data.data[0].locationName;
$rootScope.locSubTitle = response.data.data[0].locationSubTitle;
$rootScope.locParagraph = response.data.data[0].locationParagraph;
$rootScope.locGluten = response.data.data[0].glutenfrei;
$rootScope.locRaucher = response.data.data[0].raucher;
$rootScope.locGarten = response.data.data[0].garten;
$rootScope.locTakeAway = response.data.data[0].takeaway;
$rootScope.locRollstuhl = response.data.data[0].rollstuhl;
console.log($rootScope.locGluten);
});
break;
case 2:
$http.get(Backand.getApiUrl() + '/1/objects/details')
.then(function(response) {
$rootScope.locName = response.data.data[1].locationName;
$rootScope.locSubTitle = response.data.data[1].locationSubTitle;
$rootScope.locParagraph = response.data.data[1].locationParagraph;
$rootScope.locGluten = response.data.data[1].glutenfrei;
$rootScope.locRaucher = response.data.data[1].raucher;
$rootScope.locGarten = response.data.data[1].garten;
$rootScope.locTakeAway = response.data.data[1].takeaway;
$rootScope.locRollstuhl = response.data.data[1].rollstuhl;

});
break;
default:

}
}


$scope.goToDetail = function(id) {
$state.go("detail")
$scope.update(id);

}


HTML

<div ng-repeat="cat in content" class="animated lightSpeedIn">
<a ng-click="goToDetail(cat.id)" nav-transition="none"><div ng-style="{'background': 'url(' + cat.catBgUrl + ')','background-repeat': 'no-repeat','background-size': '100% 100%','display': 'block','width': '100%','height': '25vh' }" class="bgcat center">
<div class="inner">
<h1>{{cat.catName}}</h1>
<h4>{{cat.catSubtitle}}</h4>
<img src="img/home/open.png" alt="">
</div>
</div></a>
</div>


I know this is bad code but my thoughts were that go to the state details and run the function update with the id of the entry. Then switch trough the id and update the view based on the clicked element.

The code works fine, but i think there is a much better way to do it and i need it dynamically.

I'm really stuck with this and would like to do it correctly. How should it be made? Can you give me a hint please?

Answer
for codes relating to data it is better to use services for separation.

**Your service**

let app be your angular module

app.service('detailService',function($http){
    var update = function(id,callback){
        switch (id) {
            case 1:
               $http.get(Backand.getApiUrl() + '/1/objects/details')
               .then(function(response) {
                   callback(response,0);
               });
            break;
            case 2:
               $http.get(Backand.getApiUrl() + '/1/objects/details')
               .then(function(response) {
                   callback(response,1);
               });
            break;
    };
});

**Your controller**

app.controller('myCtrl',function($scope,$state,detailService){
    detailService.update(id,function(response,index){
        $scope.response = response;
        $scope.index = index;
        $state.go("detail"):
    });
});

**You can display the response as**

<p>Details : {{response.data.data[{{index}}]}}</p>
<p>Location Name : {{response.data.data[{{index}}].locationName}}</p>