こういうときって普通にifなどで絞り込んでからng-repeatを用いるのですか?

データ1つに対する項目として、 配列だと予めしっかり設計していないと、1箇所変更するために100ファイル変更しないといけないとかもあり得るわけで、後でぐちゃぐちゃ変える可能性があるところでは使いにくいです。, jsonを使うと確かに配列よりも通信量は大きくなりますが、現代の通信環境ではそれほど大きな問題になるほどの差はなく、それよりもメンテナンス性の向上の方が価値があると考える人たちがjsonを採用したわけです。フレームワークであるAngularJSは、ちょっと通信量が多くなっても変化に強いことの方を選んだわけですね。, ここまでjsonびいきなことを書きましたが、配列の方がいい場合もあります。それは単一のテンプレートに当てはまる情報を大量に扱う場合です。カンマで文字列を繋げたCSVフォーマットとかがそれです。 1, ネストしたrelationテーブルの情報は取れてるのに、表示されない(laravel5.5), 回答 Uint8Array  に変換する処理を書かなないとダメです。, そしてこの関数とzlib.jsを使って JSONを圧縮&展開するコード を書いてみます。, JSONみたいに、同じ文字列( データの構造などにもよりますけど。, リピートしてコードを出力するということは、レンダリングコストもかかって、処理が重くなるので、

JSONフォーマットは機械的に変換しやすい形式である事が重要であり、その点を守れば、どんなフォーマットでも良いと私は考えます。, 曜日は Date.prototype.getDay に準拠し、「0 = 日曜日, 1 = 月曜日, ...」にするとJavaScriptから扱いやすくなると思います。, 機械的な変換が容易であれば、JSON に拘る必要もありません。 0 / クリップ 配列の何番目に何の値が入っているのかがわからなくなります。 JSONに限った話ではありませんが、 HTMLやCSS、JSONなどのファイルはサーバとクライアント間の通信時にgzipで圧縮されます。 なので、テキストファイルの送受信は多少膨大になっても高圧縮に出来るのであまり気にする必要はありません。 例えば、質問内で提示されているデータの内容を表示するとき、配列とJSONではそれぞれ以下のようになるでしょう。, 両者を比較してみて、いかがでしょうか。

などがあるとします。, のようになりますが、10個くらいなら確かにコードも読みやすくていいと思うのですが、 配列の場合、2=科目、3=教員といった対応付けを全て覚えていないと、出力される内容が適切どうか把握できません。 ・先生の名前 「week」や「subject」等の名称をkeyにして格納することで、

参考までに、過去に私が書いたライブラリを紹介しておきます。, しかしこれだとtopoさんの言うとおりでこれだとデータの関連付けが難しくなります :  )が含まれるのは圧縮率が高くなりそう, 個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信していく予定。PHP、JavaScript(jQuery)、CSSがメイン。座右の銘 : 遊びは仕事、仕事は遊び, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, compact zlib, deflate, inflate, zip library in JavaScript - imaya/zlib.js, 個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。眉毛が太い, jQueryで $ is not define エラーが出たときの一番簡単な解決法, AndroidのIntentから複数画像選択を行う【ACTION_OPEN_DOCUMENT】, JavaScriptで手軽にgzip圧縮できるライブラリ使ってみた【zlib.js】, // compressed = Array. or Uint8Array, jQueryの動かないなどのトラブル解決します jQueryのトラブル・質問なんでも相談可能!. こういうときって普通にifなどで絞り込んでからng-repeatを用いるのですか?, 実際のコードがどういうコードなのかがわからないので、何とも言えないんですが、 最近AngularJSを勉強し始めたのですが、調べ物をしているとデータを表示する時にjsonファイルを利用していることが多く見受けられるのですが、なぜjsonなのでしょう。 次に、for ループを使って配列の個々のオブジェクトをなめていきます。それぞれについて: 付記: 例を動かしてみるのに問題があったら、heroes-finished.html ソースコードを参照して見て下さい(こちらで ライブ実行 もできます)。, 付記: もし JavaScript オブジェクトにアクセスするのに使っているドット/ブラケット記法をなぞっていくのが難しければ、superheroes.json  のファイルを別のタブやテキストエディタで開いておいて、JavaScript と並べて読んでいくとわかりやすいかもしれません。JavaScript オブジェクトの基本 記事にも戻って、ドット/ブラケット記法について読み返してみてください。. 2 / クリップ

通信量や通信時間やキャッシュするデータ量を気にするようなときに選びます。, 要はそれぞれメリットデメリットがあるから、選択権がある人がそれらから最適と考えるものを選ぶわけです。その選択が良かったかそれともまずかったかは、使う各人が判断していいと思います。, 配列の要素のみだと、データの中身にどういうデータが格納されているのかが判別しにくいです。 このような方法で値にフィルタリングをかけてから、ng-repeatに配列を渡すのはいかがでしょう。, 2017/04/12 14:05 編集, この質問のポイントは配列とjsonの違いというより、配列と連想配列の違いな気がします。, みたいになります。連想配列なら修正時にその要素が何番目になるのか、そして他の要素がどのようにずれるのかを考える必要がなくなるし、ラベルがそのままの意味なので勘違いによる間違えがでにくくなります。 Array. or Uint8Array  ...?, ということで、まずは 文字列 <=> Uint8Array と変換できる関数 を作ってみます。, それから今回はテキストの場合だけど、画像とか音声とかのバイナリデータでも 一方、JSONの場合はデータそれぞれに名前を付けることができる=データに意味を持たせることができるので、人間に理解しやすくなります。上のJSONの例では、「教室」と「教員」が入れ替わっていることが一目瞭然ですね。 必要に応じて、内部でデータを加工したりしてng-repeatなどを実行したりしています。, こういうときって普通にifなどで絞り込んでからng-repeatを用いるのですか?, 既に回答が出揃っていますので上記質問に対しAngularJSには上記を満たすようなFilterという機能があるということだけご紹介しておきます。 "  とか ・授業名 基本的に JSONファイルは手書きで編集するものではなく、機械的に書き換える方法を用意する方が合理的だからです。 ループで文字列を使いたい場合はもう一つ配列を作ってその配列の値をkeyとして取得するというすこし遠回りな方法になります, JSONに限った話ではありませんが、 これが100種類、200種類になるとデータ量が「無駄に」膨大になるしメリット薄い気がするんですが、実際どうなんでしょうか。 2 / クリップ 僕自身そういう場面があったので、 質問ばかりで恐縮ですが、よろしくお願いします。, teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。, 評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。, 上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。, そもそもJSONとは、'JavaScriptObjectNotation'の略で、「javascriptにおける'オブジェクト'を表現するための記法」のことです。すなわち、JSONデータ = javascriptにおけるオブジェクトです。, 複数のデータをまとめる際に何故配列ではなくJSONを使うかというと、「その方が扱いやすいから」です。

先のデータは二次元配列に出来る以上、CSVやDBで管理する事が可能であり、CSVならExcelで入力、DBならサーバサイドスクリプトで管理する為のプログラムを書けば、プログラムを理解できない人にも編集は容易でしょう。 自分はAngularに限らず、Reactなどでも、必要な項目だけをリピートしてますよ。 0, Rails5 の ActiveRecordで JOIN した際の結合先のデータがnilになる, 回答 JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。頻繁に見かけるデータフォーマットですので、この節では JavaScript を使って JSON をパースする、JSON のデータを参照する、JSON を作るなど、JSON を扱うために必要となる操作を説明します。, JSON は JavaScript オブジェクトの構文に従ったテキストベースのフォーマットで、Douglas Crockford によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)ことや生成するが機能があります。, JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った JSON というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。, 注記: 文字列をネイティブオブジェクトへ変換することは parsing と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは stringification と呼ばれています。, JSON はそれ自身をファイルとして格納することもできます。それは MIME type が application/json で、.json という拡張子の付いたただのテキストファイルです。, 上で説明したように、JSON は JavaScript オブジェクトにとても似ているフォーマットを持った文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型(文字列、数値、配列、ブーリアンやその他のリテラル型)を使うことができます。これにより、以下のように階層的にデータを構成することができます。, もし、このオブジェクトを JavaScript プログラムへ読み込んだ場合(例えば、例えば変数superHeroes へ代入する)、JavaScript オブジェクトの基本の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。, さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中2番目のヒーローの 3番目の能力を参照する場合は、以下のようになります。, 注記: 上記の JSON は JSONTest.html で参照することができます。(ページ内の source code を参照してください)。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。, ここまで見てきたように、JSON は JavaScript オブジェクトとほとんど同じように扱うことができます。配列も JSON で使うことができ、例えば以下のようになります。, これも有効な JSON であり、パースしたデータには配列のインデックスを指定するだけです。例えば、[0]["powers"][0]のように表記できます。, それでは、Web サイト上でどのように JSON を使うことができるか例を通して見てみましょう。, まず、heroes.html と style.css のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な形式の HTML です。, 他には、この演習で書く JavaScript を含んだ