current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

I am creating a controller in Angular for which I get the url parts and some parameters with $statePrams.

I call the $http service to get data back from a json file. After getting the data back, I assign the specified object element's content -which specification is generated from $stateParams- to a $scope variable which I can process in my view to generate some kind of unordered list elements.

My problem is when I generate for example the path as result['data']['datas']['timeline'] , then it won't work, and give me ngRepeat:dupe error.

However there are no duplicates at all. If I just type it in manually like $scope.naviData = result['data']['datas']['timeline']; , it will generate the object, give me all the needed data and draw the li elements in the view.

How could I solve this problem since I do not know how to do this dynamic object element access otherwise. Here are two images:

First one is with manual writing first

Second one is with dynamically generated variable second The first console.info in both case are the state params I generate the path from. Also here are the codes doing the magic part for me.

angular.module('MPWeb.datas', [])
  .controller('DataDetailsCtrl', function($scope, $state, $stateParams, $http) {
    $scope.params = $stateParams;
    // set datas for dynamic object handling
    var base = 'data.datas';
    var category = ($scope.params.categoryId) ? $scope.params.categoryId : '';
    var article = ($scope.params.articleId) ? $scope.params.articleId : '';
    var stateConfig = (article) ? {
      params: {
        prefix: base,
        categoryId: category,
        articleId: article
      }
    } : {
      params: {
        prefix: base,
        categoryId: category
      }
    };
    console.info(stateConfig.params); // this is the first console entry on the screenshots
    // with this function I get back a standard joined string
    var objToString = function(obj) {
      var tabjson = [];
      for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
          tabjson.push(obj[p]);
        }
      }
      tabjson.push()
      return tabjson.join('.');
    };
    // generate sideNavigation
    $http({
      method: 'GET',
      url: './json/mp-navigation.json'
    }).then(function successCallback(result, status, headers) {
      var temp = objToString(stateConfig.params);
      var naviTemp = (stateConfig.params.articleId) ? temp.replace(/\.[^.]+$/, "") : temp;
      naviTemp = "result['" + naviTemp + "']";
      naviTemp = naviTemp.replace(/\./g, "']['"); // dynamically generated path with bracket notation method
      //$scope.naviData = naviTemp; // if I use this, it gives me the error
      $scope.naviData = result['data']['datas']['timeline'];
      console.info(naviTemp);
    }, function errorCallback(result, status, headers) {
      console.warn(status);
    });
  });

Also if I use track by $index in my view it will just generate li elements from the letters of my generated path.

share|improve this question
up vote 0 down vote

The Problem is you have used trackby in your ng-repeat in your template. but the trackby accepts unique keys from the objects in array .

ex : 

values = [{id:12,name:'king'},{id:13:name :'ram'},{id:14:name:'king'}]

Correct

<div ng-repeat="value in values  track by id">
{{value.name}} : {{value.id}}
</div>

Correct 

<div ng-repeat="value in values  track by $index">
{{value.name}} : {{value.id}}
</div>

Wrong because name is not unique

<div ng-repeat="value in values  track by name">
{{value.name}} : {{value.id}}
</div>
share|improve this answer
    
Thanks but the problem is different I am sure. Also, in return I should get this: "timeline": { "stormy-beginnings": "1969 - 2164", "to-boldly-go": "2188 - 2379", "golden-ages": "2380 - 2393" }. Also in my view I work them with ng-repeat="(url, name) in naviData", where I can use track by with url, but it still give me the errors as I mentioned in my original post. – CreativeZoller Jun 23 at 7:35
up vote 0 down vote

So after some days, I finally figured it out with a little help. For anybody who find this issue in the future, this is how to solve in the controller:

  $scope.params = $stateParams;
  $scope.navPrefix = $state.current.url.split('/:')[0];
  $scope.navPrefix = ($scope.params.categoryId) ? $scope.navPrefix + '/' + $scope.params.categoryId + '/' : $scope.navPrefix + '/';
  $scope.activeItem = ($scope.params.articleId) ? $scope.params.articleId : $scope.params.categoryId;
  var tempCat = $state.current.url.substr(1);
  $scope.naviCat = tempCat.split('/:')[0];
  // set datas for dynamic object handling
  var base = $scope.naviCat;
  ...
  // generate sideNavigation
  $http({
    method: 'GET',
    url: './json/mp-navigation.json'
  }).then(function successCallback(result, status, headers) {
    var naviMain = result.data[$scope.naviCat]['main'];
    var naviTemp = result.data[stateConfig.params.prefix][stateConfig.params.categoryId];
    $scope.naviData = (stateConfig.params.categoryId == '') ? naviMain : naviTemp;
    }, function errorCallback(result, status, headers) {
      console.warn(status + ' with getting: ' + headers);
  });

Cheers

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.