[B! JSON] henachoco-a-55のブックマーク

超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編

超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%

henachoco-a-55 2017/04/26

JSON
jQuery

リンク

jQueryでjsonデータを扱ってみる【入門編】

jQueryでjsonデータを扱ってみる【入門編】 javascriptで外部のWebサービスを利用するデータ形式はjsonを使うことが基本なようです。似たようなフォーマットとしてXMLがありますが、こちらはHTMLと同じマークアップ言語なのですんなり入っていける反面、jsonは少々わかりずらいといった先入観があったりするんじゃないでしょうか。そこで入門編と題して（入門編しかない!）改めて基礎から勉強していけたらと思います。投稿日2010年07月25日更新日2016年04月26日とにかくシンプルなjson jsonデータは基本は外部から読み込むことになりますが、練習なのでとりあえずjavascript内の変数内に直に書きます。「:（コロン）」で区切ったキーと値を一組として、２組目を「,（コンマ）」で区切って記述していきます。それらを{}で囲むことで一つのオブジェクトとして扱い

henachoco-a-55 2017/04/26

jQuery
JSON

リンク

1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法

$.ajaxによるJSON読み込み方法例えば以下のようなJSONの場合 [ { "version": "1.5", "codename": "Cupcake" }, { "version": "1.6", "codename": "Donut" }, { "version": "4.4", "codename": "KitKat" } ] $.ajaxでの読み込みは下記のようになる $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json', dataType: 'json', success: function(json){ var len = json.length; for(var i=0; i < len; i++){ $("#a").append(json[i].version + ' ' + json[i].coden

henachoco-a-55 2017/04/26

jQuery
JSON

リンク

jQuery リファレンス：jQuery.getJSON

索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素）属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├