このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

JavaScript JSON Ajax JSON.parseとevel関数 スマートフォンUI例

JavaScript

2013.04.07

この記事は最終更新日から1年以上が経過しています。

JSONとは、「JavaScript Object Notation」の略で「ジェイソン」といいます。 JSON は、数値や文字列や配列やオブジェクトなどのデータを、文字列で表現できる軽量なフォーマットであり、XMLと比べると簡潔に構造化されたデータを記述することができるため、人間が理解しやすいデータフォーマットであり、JavaScriptのオブジェクトと文字列の相互変換が柔軟にあつかえます。

それでは早速記述してみましょう。

JSONデータを変換

var str = '{ "ary":[0,1,2], "obj": { "a":0,"b":1,"c":2 } }',
    obj = JSON.parse(str);
    console.log(obj.ary);
console.log(obj.obj);

コンソールで確認してみると、

このようにObjectとして変換させているのが確認出来るかと思います。。

JSON.parse()はJSONフォーマットで作成されている文字列データをオブジェクトに変換してくれるメソッドとなります。

JSON.parse(); 

以前では、JSON.parse()意外にeval()等が用いられていましたが、こちらはセキュリティ上の問題が在るため、使用はしないほうが良いでしょう。

evalは悪魔と覚えていて何ら問題はかと思います。仮に上記の例ですと、

eval("obj = " + str);

でオブジェクトに変換できますが、使用はしないでください。

逆にオブジェクトからJSONフォーマットに変換する際は、

JSON.stringify();

で、JSONフォーマットに変換することが可能です。

var obj = { ary:[0,1,2], obj:{ a:0, b:1, c:2 } };
var str = JSON.stringify(obj);
console.log(str);

コンソールで確認すると変換できているのが確認できます。

また、JSONデータは厳格な部分もあり、文字列はダブルコーテーション「”」で囲わないとエラーが発生しますのでご注意を。

JSON + Ajax

Ajaxとは、簡単に説明しますと、XMLHttpRequest()でオブジェクトを生成し、非同期通信を行う手法です。

詳しくはこちらでもご参照の程を。

JavaScript Ajax XMLHttpRequest

では、XMLHttpRequest オブジェクトを作成しましょう。

今回はIEなどの対応は行いません。

httpObj = new XMLHttpRequest();

オブジェクトの方をコンソールで確認してみます。

console.log(httpObj);

IE 7以前のIEブラウザ以外のブラウザだと作成出来ているかと思います。

XMLHttpRequest オブジェクトが保持する、onloadメソッドとopenメソッドとresponseTextプロパティを使い、JSONデータを受け取りましょう。

では、JSONデータを用意。

test.json

{"item":[
 {
   "itemCode":100,
   "itemName":"ミカン",
   "itemPrice":80
 },
 {
   "itemCode":101,
   "itemName":"リンゴ",
   "itemPrice":100
 },
 {
   "itemCode":102,
   "itemName":"ぶどう",
   "itemPrice":200
 }]
}
httpObj = new XMLHttpRequest();
httpObj.open("get", "./test.json", true);
httpObj.onload = function() {
  var myData = JSON.parse(this.responseText),
      txt = "";
  for (var i=0, il = myData.item.length; i < il; i++) {
    txt = txt + myData.item[i].itemName + ":" + myData.item[i].itemPrice+"円<br>";
  }
  document.getElementById("result").innerHTML = txt;
}
httpObj.send(null);

onloadメソッドで読み込んだ際に関数を実行しております。

先ほどのJSON.parseでmyDataオブジェクトを生成。

変数txtにそれらのデータをデータの文格納して表示させております。

ブラウザ表示

スマートフォンデモ

スマートフォンUIとして、スライドで「シャー」と切り替え、JSONで受け取ったデータを表示させるスマートフォンUIにおける実用的なデモをお送りしようかと思いましたが、

色々と公開できなかったり、できたりとありまして、今回は控えさせて頂きます。大変申し訳ありません。。

近いうちにまた、別の形で公開出来ればと思います。

Comment

Related Article

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US