0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Objectで、ng-repeatで、ちょいちょいハマるのでメモ

Last updated at Posted at 2016-12-12

Angularで自分が一番駆使しているのがng-repeat
jsonの取得でちょいちょいハマるのでメモ
独学でやっているだけなので、自己責任で参照ください

整理:配列と連想配列の違い

配列(array)

javascript
testArray_1 = []; //配列の初期化
testArray_2 = {}; //連想配列の初期化

配列には要素に対して、様々なメソッドがある
以下、参考にどうぞ
http://qiita.com/takeharu/items/d75f96f81ff83680013f

連想配列には、末尾追加、先頭追加、場所を指定したような追加ができない
自分はよくObjectに**.push**を使って、Consoleに怒られる・・・。

これでng-repeatでハマることが多々ある

javascript
testArray_3 = red:, green:, blue:
html
SPAN {{testArray_3.red}}{{testArray_3.green}}{{testArray_3.blue}}

赤緑青 となるが

html
TD ng-repeat="(key, value) in testArray3"
 {{value}}

青緑赤 となる
連想配列はkeyをアルファベット順に取得してくるのでハマる
順番に ng-repeatを取得する場合は配列の方が扱いやすい。
配列の場合、歯抜けのデータで**""ないしvoid(0)(undefined)**を入れないと
フロントの処理が効かないのでズレズレテーブルになりやすい。

個人的力技

javascriptでは変数名(key)の先頭文字を数字にできないので、
姑息にもアンダーバーで数字を囲ってしまう。

javascript
testArray_3 = _0_red:, _1_green:, _2_blue:

こうしておくと、アルファベット順で書き出されても数字でソートが効く。
key:value だと 歯抜けのときvalueだけ無い状態が担保されている気がするので
精神的ストレスが緩和する気がする。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?