LoginSignup
1
0

More than 1 year has passed since last update.

【JavaScript】JSONデータのデコード・エンコード

Last updated at Posted at 2023-01-14

何の記事か

JSONファイル.jsonのデータをデコード・エンコードする手法をまとめました。
ここで、デコードというのはJSONデータをオブジェクトに変換すること、エンコードというのはその逆を表します。

デコード

以下のようなJSONファイルがあったとします。

example.json
[
  {
    "country":"Japan",
    "food":"sushi",
    "famous_place":["Tokyo","Osaka","Nagoya"]
  },
  {
    "country":"korea",
    "food":"kumuchi"
  }
]

JSON.parse()を記述することで、JSONファイルからデータをデコードし、インスタンスとして使うことができます。

const fs = require("fs");
const jsonData = JSON.parse(fs.readFileSync("example.json"));

require("fs")は、Node.jsのファイル扱う用のモジュールを記述しています。

console.log(jsonData[0].country); //Japan
console.log(jsonData[0].famous_place[1]); //Osaka

という風に簡単にメンバを呼び出すことができます。ちなみに、UTF8でデコードしたいときには、引数に'utf8'を追加します。

const jsonData = JSON.parse(fs.readFileSync("example.json",'utf8'));

のように指定すればよいです。

エンコード

構造体をJSONデータにエンコードするには、JSON.stringify()を使います。

var myStructure = {
  Japan: {
    food:"sushi",
    famous_place:["Tokyo","Osaka","Nagoya"]
  },
  Korea: {
    food:"kumuchi",
    number: 999
  }
};

var jsonData = JSON.stringify(myStructure);
//{"Japan":{"food":"sushi","famous_place":["Tokyo","Osaka","Nagoya"]},"Korea":{"food":"kumuchi","number":999}}
console.log(jsonData);

JSON.stringify()は引数として関数を持つことができ、構造体をJSONデータにエンコードする際の条件付けなどが可能です。この関数はreplacerと呼ばれています。
せっかくなので、example.jsonに書き込んでみます。

const fs = require("fs");

function replacer(key,value){
  if (key === 'Japan') {
		return undefined;
	}
	return value;
}

var myStructure = {
  Japan: {
    food:"sushi",
    famous_place:["Tokyo","Osaka","Nagoya"]
  },
  Korea: {
    food:"kumuchi",
    number: 999
  }
};

var jsonData = JSON.stringify(myStructure,replacer);
fs.writeFileSync("./config/example.json",jsonData);

replacerでデータを選択的に取り出すことができたようです。

example.json
{"Korea":{"food":"kumuchi","number":999}}

このままではexample.jsonの中身が見づらいと思います。実はもう1つ引数を追加することができて、それによってエンコードの具合が変わります。

var jsonData = JSON.stringify(myStructure,replacer,"\t");

という風に、最後に"\t"を付け加えることで、いい感じに改行してくれます。

example.json
{
	"Korea": {
		"food": "kumuchi",
		"number": 999
	}
}

今回は以上です。

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0