Update angular View based on http request dynamically

Question

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?

$scope doesn't work because it's referencing to the function update(). I tried every thing. My goal is that the id automatically increases as long the cat.is has a value in the ng-repeat. — olivier
– olivier, Commented Jul 29, 2016 at 20:35
can't you just make the $http request on another controller after you change routes? You can define parameters on the routes that you would be creating. and another thing, avoid using $rootScope — doge1ord
– doge1ord, Commented Jul 29, 2016 at 20:41
How can I create parameters? So that the details view shows the correct data from the huge json object. I can't use ng repeat and would have to show the entry which fits together with the id of the category. — olivier
– olivier, Commented Jul 29, 2016 at 20:45

tsadkan yitbarek · Accepted Answer · 2016-07-29 21:33:29Z

2

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>

edited Jul 29, 2016 at 21:33

answered Jul 29, 2016 at 21:08

tsadkan yitbarek

1,3702 gold badges14 silver badges29 bronze badges

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

2 Comments

olivier Over a year ago

Thank you very very much that already help alot! Can you give me a hint how i could increase the data array location? For example when the id is 1 then response.data.data[0].locationName when the id is 2 then response.data.data[1].locationName

tsadkan yitbarek Over a year ago

I have changed the source.could you please check it.

Collectives™ on Stack Overflow

Update angular View based on http request dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related