javascriptでjsonを扱う
目的
jsonの取り扱いについて、ざっくり学んで行こうと思います。
使用する言語はjavascriptです。
環境
OS:Windows 10 Pro
IDE:VSCode バージョン(1.68.1)
docker:Docker version 20.10.16
docker-compose:docker-compose version 1.29.2
docker container:amazon linux 2 + nginx 1.20
jsonとは
mozillaの公式に以下の説明がありました
JavaScript Object Notation (JSON) は、構造化データを表現するための標準のテキストベースの形式で、 JavaScript のオブジェクト構文に基づいています。ウェブアプリケーションでデータを転送する場合によく使われます（例えば、複数のデータをサーバーからクライアントへ送信して、ウェブページ上に表示する場合などで、その逆もあります）。頻繁に見かけるデータ形式ですので、この記事では JavaScript を使用して JSON を扱うのに必要なすべてのこと、例えば JSON を解釈してその中のデータにアクセスしたり、 JSON を作成したりする方法を説明します。
実際のjson
{
"name": "batton",
"age": 43,
"gender": "man",
"active": true,
"article": [
{
"title": "Docker Desktopが便利だった",
"length": 3108,
"active": true
},
{
"title": "よく使うdocker-composeコマンド、まとめ",
"length": 4374,
"active": false
},
{
"title": "Dockerfileでコンテナ破壊しほうだい",
"length": 2885,
"active": true
}
]
}
zennでの記事をjson形式で表現しました。
name,age,gender,activeは基本情報、articleに3つの情報を持たせています。
jsonを処理してみる
javascriptを利用しjsonを処理してみようと思います。
dockerでnginxを起動して、動作確認します。
※windowsでjson_read.htmlを作成し、ブラウザで読み込んでも同じ動作をします。
※こちらにdockerの記事を掲載しています。よろしければ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>battonと記事</p>
<script>
const json_text = `
{
"name": "batton",
"age": 43,
"gender": "man",
"active": true,
"article": [
{
"title": "Docker Desktopが便利だった",
"length": 3108,
"active": true
},
{
"title": "よく使うdocker-composeコマンド、まとめ",
"length": 4374,
"active": false
},
{
"title": "Dockerfileでコンテナ破壊しほうだい",
"length": 2885,
"active": true
}
]
}
`;
// json_textの型を確認します
console.log(`json_textの型は${typeof json_text}`);
</script>
</body>
</html>
console.log()を使って型(typeof)を確認してみました。
- json_textはstringと判定されました。
疑問があります
json_textにはjsonを記載しています。しかし、型判定はstring(文字列)となりました。
どうしてだろうと思い、google先生に聞こう・・・あ、聞くまでもありませんでした。
json_textはバッククオートで囲んだ、ただの文字列でした。自分ではjsonを定義している！と、勘違いしていました。
変数に文字列を代入している。だけでした。
※バッククオートで囲んで複数行対応していますがただの文字列です。
どうしたらjsonになれるんだ？
公式のマニュアルを引用
JSON.parse() メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。
文字列からjsonに変換します。
早速JSON.parseを使います。
json_read.htmlを書き換えます。
// json_textの型を確認します
console.log(`json_textの型は${typeof json_text}`);
// json_textの文字列をjsonオブジェクトに変換します
const json_obj = JSON.parse(json_text);
// json_objの型を確認します
console.log(`json_objの型は${typeof json_obj}`);
json_obj変数を定義し、json_textをJSON.parseで変換します。
json_objの型判定はobjectとなり、無事jsonに変換することができました。
jsonの値をブラウザに表示してみよう
json_read.htmlを書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>battonと記事</p>
<p id="batton_name">名前：</p>
<p id="batton_age">年齢：</p>
<p id="batton_gender">性別：</p>
<p id="batton_active">生死：</p>
<script>
const json_text = `
{
"name": "batton",
"age": 43,
"gender": "man",
"active": true,
"article": [
{
"title": "Docker Desktopが便利だった",
"length": 3108,
"active": true
},
{
"title": "よく使うdocker-composeコマンド、まとめ",
"length": 4374,
"active": false
},
{
"title": "Dockerfileでコンテナ破壊しほうだい",
"length": 2885,
"active": true
}
]
}
`;
// json_textの型を確認します
console.log(`json_textの型は${typeof json_text}`);
// json_textの文字列をjsonオブジェクトに変換します
const json_obj = JSON.parse(json_text);
// json_objの型を確認します
console.log(`json_objの型は${typeof json_obj}`);
// html要素を取得します
const elem_batton_name = document.getElementById('batton_name');
const elem_batton_age = document.getElementById('batton_age');
const elem_batton_gender = document.getElementById('batton_gender');
const elem_batton_active = document.getElementById('batton_active');
// jsonオブジェクトの値をブラウザ画面に出力してみます
elem_batton_name.textContent += json_obj.name;
elem_batton_age.textContent += json_obj.age;
elem_batton_gender.textContent += json_obj.gender;
elem_batton_active.textContent += json_obj.active;
</script>
</body>
</html>
json_read.htmlへアクセスするとjsonの値が表示されます。
jsonの使い方
jsonはkeyと呼ばれる識別子とvalueと呼ばれる値がペアになったデータ構造となります。
elem_batton_name.textContent += json_obj.name;
↑
elem_batton_name.textContentにjson_objのname(key)のbatton(value)を代入しています。
jsonのkeyを指定するとペアの値(batton)を利用することが可能です。
何が便利なんだ？
例えばjson_textを利用してこのhtmlを出力してみましょう。
// json_textの型を確認します
console.log(`json_textの型は${typeof json_text}`);
// json_textをそのまま利用します
//const json_obj = JSON.parse(json_text);
// json_objの型を確認します
// console.log(`json_objの型は${typeof json_obj}`);
// html要素を取得します
const elem_batton_name = document.getElementById('batton_name');
const elem_batton_age = document.getElementById('batton_age');
const elem_batton_gender = document.getElementById('batton_gender');
const elem_batton_active = document.getElementById('batton_active');
// jsonオブジェクトの値をブラウザ画面に出力してみます
// elem_batton_name.textContent += json_obj.name;
// elem_batton_age.textContent += json_obj.age;
// elem_batton_gender.textContent += json_obj.gender;
// elem_batton_active.textContent += json_obj.active;
// json_textを利用するので、key/valueで扱うことができなくなりました
// その為、文字列を引っ張ってきて代入します
elem_batton_name.textContent += json_text.substring(40,46);
elem_batton_age.textContent += json_text.substring(72,74);
elem_batton_gender.textContent += json_text.substring(103,106);
elem_batton_active.textContent += json_text.substring(135,139);
json_objと同じデータを表示することができました。
では、nameのbattonをbatton1に変えてjson_read.htmlにアクセスしてみましょう。
"name": "batton",
↓
"name": "batton1",
batton1に変更したはずがbattonのまま表示されています。
他のデータも正常に表示されてなくなってしました。
json_textは文字列で定義されています。その為、substringを用いて開始/終了を指定し文字列を取得しています。
１文字でもずれてしまうと開始/終了地点がズレてしまう為、意図した値を取得できなくなってしまいます。
それでは、元に戻してjson_read.htmlへアクセスしてみましょう。
batton → batton1に無事に変更され、表示されるようになりました。
他の値も正常に表示されています。
ありがとうございます。
ご意見、ご批判頂ければ幸いです。
Discussion