角度ソートとngリピート

Question

Googleシートからデータを読み取るアングルアプリのリバースエンジニアリングに取り組んでいます。

私がしようとしているのは、ソーステーブルのすべての行を含むシートの最後の列の一意の値を使用して "キー"の配列を作成することです。私はそのページにキー名を表示し、その下に同じキーを持つすべての行を表示します。ここで

は、私が持っているコードは、これまでのところです：

var app = angular.module('rowList', []); 
 
app.controller('KeyCtrl', function($scope, $http, $sce) { 
 
    angular.module('app', ['ngSanitize']); 
 
    $scope.searchText = ""; 
 
    $scope.method = 'jsonp'; 
 
    $scope.url = 
 
     "https://docs.google.com/spreadsheet/tq?tqx=responseHandler:JSON_CALLBACK&key=1SltKrRbL7CZEhOq42IHNvb-8_d-dJyL8e0zdKYUd0y4&single=true&gid=1&headers=2&tq=select A,B,C,D,E,F"; 
 
    
 
    $http({ 
 
     method: $scope.method, 
 
     url: $scope.url 
 
    }).success(function(data, status) { 
 
     $scope.status = status; 
 
    }).error(function(data, status) { 
 
     $scope.data = data || "Request failed"; 
 
     $scope.status = status; 
 
    }); 
 
    // create easy quick lookup for key 
 
    var data = data.table; 
 
    var keySort = {}; 
 
    for (var i = 0; i < data.rows.length; i++) { 
 
     // sort rows in to the correct key 
 
     // if the key doesn't exist, create an empty array 
 
     if (!keysSort[data.rows[i].Keys]) { 
 
      keysSort[data.rows[i].Keys] = []; 
 
     } 
 
     // add row 
 
     keysSort[data.rows[i].Keys].push(data.rows[i]); 
 
    } 
 
    // get the keys 
 
    var keyAry = Object.keys(keySort); 
 
});

.appwrap {width:200px; background-color:cyan;} 
 
.appwrap div {background-color:pink;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="rowList"> 
 
<div ng-controller="KeyCtrl"> 
 
<div class="appwrap" ng-repeat='key in keyAry'> 
 
    {{key}} 
 
    <div ng-repeat='row in keySort.key'> 
 
    {{row.ColA}} 
 
    </div> 
 
</div>

あなたは、私は二つのことを指摘したいの応答の前に：長期的に

1）を、私はなり文句を言いませんこのアプリを実行するためにGoogleシートを使用しています。

2）私が上記のように、私はすでに存在するものからこれをリバースエンジニアリングしようとしています。私は、JSに無駄なコードがある（または意味を持たないもの）と確信しています。私はベストを尽くしています。

JSONデータが届いているシートにhere's the linkがあれば、それは役に立ちます。 （誰でも見るために設定する必要があります）。 $スコープ属性として

Answer 1

はng-repeat='key in keyAry'にコントローラのことが見えるように、すべての使用可能な変数を宣言してrow in keySort.key

... 
    // get the keys 
    $scope.keyAry = Object.keys(keySort); 
    $scope.keySort = keySort; 
} 

Answer 2

での操作のあなたの認知順序が間違っています。

// #1 
$http({ 
    method: $scope.method, 
    url: $scope.url 
}).success(function(data, status) { 
    // #3 if success 
    $scope.status = status; 
}).error(function(data, status) { 
    // #3 if error 
    $scope.data = data || "Request failed"; 
    $scope.status = status; 
}); 

// #2 
// create easy quick lookup for key 
var data = data.table; //data is undefined !!! 
var keySort = {}; 
for (var i = 0; i < data.rows.length; i++) { 
    // sort rows in to the correct key 
    // if the key doesn't exist, create an empty array 
    if (!keysSort[data.rows[i].Keys]) { 
     keysSort[data.rows[i].Keys] = []; 
    } 
    // add row 
    keysSort[data.rows[i].Keys].push(data.rows[i]); 
} 
// get the keys 
var keyAry = Object.keys(keySort); 

あなたはデータが成功メソッド内行き$httpコールneedesから返された後に発生します何か：

$http({ 
    method: $scope.method, 
    url: $scope.url 
}).success(function(data, status) { 
    $scope.status = status; 
    creatKeys(data); 
}).error(function(data, status) { 
    $scope.data = data || "Request failed"; 
    $scope.status = status; 
}); 


function createKeys(data) { 
    // create easy quick lookup for key 
    var data = data.table; 
    var keySort = {}; 
    for (var i = 0; i < data.rows.length; i++) { 
     // sort rows in to the correct key 
     // if the key doesn't exist, create an empty array 
     if (!keysSort[data.rows[i].Keys]) { 
      keysSort[data.rows[i].Keys] = []; 
     } 
     // add row 
     keysSort[data.rows[i].Keys].push(data.rows[i]); 
    } 
    // get the keys 
    var keyAry = Object.keys(keySort); 
} 

そして、あなたはあなたのを設定する必要があり、コードは次のように実行されますキー配列$scope

$scope.keyAry = Object.keys(keySort);