JSONに向き合う

雑記 非同期通信 JSON

ずっと逃げていたJSONに向き合います。 削除とかクリップ機能とかを非同期通信でやれたら良いな...

はじめに

非同期通信の話になると、いつもJSONなる単語が出てきます。

ここでJSONとは、JavaScript Object Notionの略です。

なるほど。今思うと、同一ページ内で動きを付けようと思ったら、JavaScriptで記述する必要がありました。

JSによって、クラスを付け加えたり、色を変化させたり、打ち込んでいる文字数をリアルタイムで表示したりできます。しかし、その際、リロードはしていなかったなと。

では、何かしらの方法で情報 (JSON) を持ってくれば、JSを用いて、ページ描写 (非同期通信) ができそうです。

JSON

JSONの書き方は単純です。
基本的には、以下のようにキーと値を1セットで書きます。
JSONの中身はJSなので、console.logで都度確認できます。

var JSON = {
  "hoges":[{
    "color":"black",
    "shape":"circle"
  },{
    "color":"white",
    "shape":"square"
  }]
}

文法のチェックは以下サイトで確認できます。
https://jsonlint.com/

画面描写

例えば、html側で以下のようなクラスがあるとします。

<div id="hoge"></div>

次のようにクラスを指定して、innnerHTMLを使えば、JSONの内容を描写できます。

document.getElementById('hoge').innerHTML = ... ;

素のJSONのままでは使えないので、必要なデータを取り出す必要があります。
for文を使うと、以下のようになります。
一行目でhogesの中身を取得しています。
二行目以降で{}内の情報を順次取り出しています。

objects = JSON.hoges;
for (x in objects) {
  objects[x].color + 'and' + objects[x].shape
}

先ほどのと組み合わせるとこうなります。これで、画面描写できます。

var objects = JSON.hoges;
var html = '';
for(x in objects) {
  html += objects[x].color + ' and ' + objects[x].shape + '<br>'
}
document.getElementById('hoge').innnerHTML = html;