Zugriff auf JSON-Objekt durch generierte Zeichenfolge in Angular

Question

Ich erstelle einen Controller in Angular, für die ich die URL-Teile und einige Parameter mit $statePrams erhalten.

Ich rufe den Service $http, um Daten aus einer JSON-Datei zurück zu bekommen. Nach dem Abrufen der Daten weise ich den Inhalt des angegebenen Objektelements, dessen Spezifikation von $stateParams generiert wird, einer $scope-Variable zu, die ich aus meiner Sicht verarbeiten kann, um eine Art von ungeordneten Listenelementen zu erzeugen.

Mein Problem ist, wenn ich zum Beispiel den Pfad als result['data']['datas']['timeline'] generieren, dann wird es nicht funktionieren, und geben Sie mir ngRepeat:dupe Fehler.

Allerdings gibt es keine Duplikate. Wenn ich es manuell wie $scope.naviData = result['data']['datas']['timeline']; eintippe, wird es das Objekt erzeugen, mir alle benötigten Daten geben und die li Elemente in der Ansicht zeichnen.

Wie könnte ich dieses Problem lösen, da ich nicht weiß, wie sonst dieser dynamische Objektelementzugriff funktioniert. Hier sind zwei Bilder:

Erste ist mit manuellem Schreib

zweiter mit dynamisch generierte Variable Die ersten console.info in beiden Fällen sind die staatlichen params I erzeugen, um den Weg aus . Auch hier sind die Codes, die den magischen Teil für mich machen.

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

Auch wird es nur li Elemente aus den Briefen meines erzeugten Pfades erzeugen, wenn ich track by $index meiner Meinung nach verwenden.

Answer 1

Das Problem ist, dass Sie trackby in Ihrer ng-Wiederholung in Ihrer Vorlage verwendet haben. , aber der Trackby akzeptiert eindeutige Schlüssel von den Objekten im 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> 

falsch, weil Name nicht eindeutig ist

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

Answer 2

Nach ein paar Tagen habe ich es endlich mit ein wenig Hilfe herausgefunden. Für alle, die dieses Problem in Zukunft zu finden, ist dies, wie in der Steuerung zu lösen:

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

Beifall