【AngularJS】リストで構成されたリストの表示方法で詰まっています

Question

現在AngularでJava側から下記のようなデータを受け取っています。

(31) [Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10), Array(10),Array(10)]

31日分のデータがあり、それぞれにIDやName、Statusなどの10件の情報が入っています。

これをng-repeatを使って効率的に表示させたいのですが、下記のように記述してもうまくいきません。
一番最後に読み込まれるデータ（31日目のデータ）が31日分表示されてしまいます。
おそらく$scope.id等が常にアップデートされてしまっているんだと思うのですが、解決策が思い浮かびません。

イメージとして、JS側でid1,id2・・・id31と番号を振っていってHTMLで呼び出すときもitemListData.id1,itemListData.id2・・・itemListData.id31と対応させたいので、310項目べた書きしようかと思ったのですが、流石に格好悪すぎるのでループ文を使って綺麗にまとめたいです。

解決方法や参考になる記事等をご存知の方がいらっしゃればご教示いただきたいです。
よろしくお願いいたします。

.success(function (data, status, headers, config) {
	for (var i = 0; i < 31; i++){
		if (data[i][0]) {
			$scope.itemListDataResult = data;
			$scope.elementId = data[i][0].id;
			for (var k = 0; k < 10; k++){
				$scope.itemListDataResult = data;
				$scope.itemDataResult = data[i];
				$scope.id = data[i][k].id;
				$scope.name = data[i][k].name;
				$scope.price = data[i][k].price;
			}
		}
	}

<li ng-repeat="itemListData in itemListDataResult">
	<div class="title">
		<p>{{itemListData.id}}</p>
	</div>
	<table class="table">
		<tbody>
			<tr>
				<th>ID</th>
				<th>NAME</th>
				<th>PRICE</th>
			</tr>
			<tr ng-repeat="itemData in itemDataResult">
				<td>{{itemData.id}}</td>
				<td>{{itemData.name}}</td>
				<td>{{itemData.price}}</td>
			</tr>
		</tbody>
	</table>
</li>

Comments

[退会済みユーザー]

素のJavaScriptで書いては駄目なの？

[rinimaruranran]

できれば学習も兼ねてAngularでがいいのですが、JavaScriptでのやり方も詰まっているので教えていただけると幸いです。

Answer 1

検証してないけれど。
ちなみに改行してあるだけで１行です。

.success(function (data, status, headers, config) {
    data.forEach (
      function ({id, name, price}) {
        [id, name, price].forEach (
          function (val) {
            this.insertCell (-1)
              .textContent = val;
          },
          this.insertRow (-1)
        )
      },
      document.querySelector ('table.table')
    );
    

Answer 2

html内で、

ng-repeat="itemData in itemDataResult"

としていた箇所を、

ng-repeat="itemData in itemListData"

とし、JS内で

$scope.itemDataResult = data[i];

の記述を削除することで、想定していた挙動になりました。