生成された文字列による角型のJSONオブジェクトへのアクセス

Question

URLパーツと$statePramsの一部のパラメータを取得するための角度のコントローラを作成しています。

$httpサービスを呼び出して、jsonファイルからデータを取得します。データを取り戻した後、特定のオブジェクト要素の内容（指定が$stateParamsから生成されたもの）を、ビューの中で何らかの種類の順序付けられていないリスト要素を生成するために処理できる変数$scopeに割り当てます。

私の問題は、例えばパスをresult['data']['datas']['timeline']として生成すると、うまく動作せず、ngRepeat:dupeエラーが発生します。

ただし、重複はありません。 $scope.naviData = result['data']['datas']['timeline'];のように手動で入力するだけで、オブジェクトが生成され、必要なすべてのデータが表示され、ビューにli要素が描画されます。

私はこの動的オブジェクト要素アクセスを他の方法で実行する方法がわからないので、この問題をどのように解決できますか。ここで2枚の画像は次のとおり

最初のものは手動書き込みである

動的に生成された可変 両方の場合の第1 console.infoがある状態のparamsとIから経路を生成さ第1 。私のために魔法の部分をしているコードもここにあります。

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); 
 
    }); 
 
    });

私は私の見解でtrack by $indexを使用した場合も、それはちょうど私の生成されたパスの手紙からliの要素を生成します。

Answer 1

問題はあなたのテンプレートのng-repeatでtrackbyを使用していることです。 ですが、trackbyは配列内のオブジェクトから一意のキーを受け取ります。

例：名前が一意でないため

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

正しい

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

正しい

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

間違っ

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

Answer 2

何日か後、私は少しの助けを借りてそれを最終的に理解しました。

$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); 
    }); 

乾杯