You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 Nuxt.jsを使って色々作っていると、generate(静的出力)時の初期表示内容にJSONファイルの内容を取り込んで表示したい、という場面に出くわします(多分)。 そんなときにどうやって取り込めばいいのかという方法を書き残しておきます。 方法 asyncDataメソッドを使います。 また、ページが動的ルーティングの場合はroutesオプションも使う必要がでてきます。 これら2つで要件は満たせるのですが、その中でどうやって読み込まれるかによって出力されるJS(ランタイム=初期表示以降に読み込まれる内容)が変わってくるので使い分ける必要があります。 サンプルケース 説明/理解しやすいように、以下のサンプルケースを用いて説明をしていきます。 Nuxt.jsを使ってブログシステムを作成する 記事はMarkdownで書き、それらを変換した個別のJSONファイルがあるものとする 初期表示時に
以前、localStorageのデータを保存する方法について記事を書きましたが、localStorageが保存できるデータは一つではなく複数のデータを保存する事もできます。 で、前回はキーに対してデータを一つだけ保存したのですが、今回は複数のデータを保存する方法として複数のデータをJSONデータとして扱えば可能になります。その方法を今回は紹介してみたいと思います。 前回のlocalStorageに保存する方法などはこちら「html5のwebStorage(localStorage)でデータを保存する」を参照してください。 localStorageを使った実際のコード 下記のプログラムは分かりやすくするために省略している。 //保存する処理 savebtn.addEventListener("click", function() { //入力されたデータを取得 var t = documen
Node.js: GET リクエストを行うExpress: POST リクエストを処理するNode.js: request モジュールを使って GET リクエストを行うNode.js: request モジュールを使って POST リクエストを行うNode.js: superagent モジュールを使って GET、POST リクエストを行うNode.js: Restler を使って GET、POST リクエストを行うNode.js: connect を使って http サーバーを立ち上げる GET リクエストに続き、POST リクエストも request モジュールを使って行う。フォーマットを「application/x-www-form-urlencoded」形式で送信する場合、form プロパティで指定する。レスポンスが JSON の場合、json プロパティに true を指定すれば
{ "response": { "id": 3342124, "message": "Hi!", "user": { "id": 3456, "name": "Taro Yamada", "image_url": "/images/taro.png" } } } など、どの構造がいいでしょうか? もっと違う構造も考えられます。 JSONはシンプルですが、構造に制約がなさすぎます。適切な設計を行うには適切な制約が必要です。 そこで、plain JSONに少し制約を加えたJSONベースのフォーマットを使うことをおすすめします。 もしあなたが、JSONレスポンスをどのようなフォーマットにするかをチームで議論したことがあるなら、JSON APIは『自転車置き場の議論』に対抗する武器となる。 共有された規約に従うことで、生産性が向上し、汎用的なツールを利用でき、アプリケーションという重要なものに集中
[{ id: 1, name: hoge, }, { id: 2, name: hoge, }, { id: 3, name: huga, }, { id: 4, name: piyo, }, { id: 5, name: huga, }, { id: 6, name: hoge, }] JavaScriptで上記のデータから name の重複をみつけて以下のような値を取得したいのですが、やり方が思いつきません。 // 理想 { hoge: [1, 2, 6], huga: [3, 5] } // これでも問題なし [1, 2, 6, 3, 5] みなさんならどのようなプログラムを組みますか? 参考にさせてください。 よろしくお願いします。
WebアプリケーションにおいてJSONを用いてブラウザ - サーバ間でデータのやり取りを行うことはもはや普通のことですが、このときJSON内に第三者に漏れては困る機密情報が含まれる場合は、必ず X-Content-Type-Options: nosniff レスポンスヘッダをつけるようにしましょう(むしろ機密情報かどうかに関わらず、全てのコンテンツにつけるほうがよい。関連:X-Content-Type-Options: nosniff つかわないやつは死ねばいいのに! - 葉っぱ日記)。 例えば、機密情報を含む以下のようなJSON配列を返すリソース(http://example.jp/target.json)があったとします。 [ "secret", "data", "is", "here" ] 攻撃者は罠ページを作成し、以下のようにJSON配列をvbscriptとして読み込みます。もちろ
jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。 似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。 そこで入門編と題して(入門編しかない!)改めて基礎から勉強していけたらと思います。 投稿日2010年07月25日 更新日2016年04月26日 とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。 「:(コロン)」で区切ったキーと値を一組として、2組目を「,(コンマ)」で区切って記述していきます。 それらを{}で囲むことで一つのオブジェクトとして扱い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く