SYNCERのロゴ
アイキャッチ画像

JSON.parse() - 文字列をオブジェクトに変換する

JSON.parse()は文字列をJSONとして解析し、JavaScriptで利用できるオブジェクトに変換するメソッドです。

概要

名前
parse
所属
JSON
仕様書
https://tc39.github.io/ecma262/#sec-json.parse

説明

JSON.parse ( text [ , reviver ] )

第1引数(text)にはJSONフォーマットに従った文字列を、第2引数(reviver)にはコールバック関数を指定します。reviverはArray.prototype.map()をイメージすると分かりやすいです。オブジェクトの各プロパティのキーと値を引数に取り、返した値が新しく設定されます。また、値がundefinedだったり返さない場合、そのプロパティは削除されます。フィルタリングなどの目的に利用しましょう。

function reviver ( key, value ) {
	return newValue ;
}

チュートリアル

第2引数は、各プロパティのキーと値を引数にとり、返した値が新しく設定されます。例えば下記の場合、全ての値に5が加算されます。

var string = '{"a": 10,"b": 20,"c": 30}' ;

JSON.parse( string, function( key, value ) {
	if ( key ) {
		return value + 5 ;
	}
	return value ;
} ) ;

返り値がundefinedだったり、返り値がない場合、そのプロパティは削除されます。例えば下記の場合、bは削除されるでしょう。

var string = '{"a": 10,"b": 20,"c": 30}' ;

JSON.parse( string, function( key, value ) {
	if ( key != "b" ) return value ;
} ) ;

コールバック関数には、最初に、空のキーとオブジェクト全体を値にしたペアがかけられる点にご注意下さい。どのような組み合わせが関数にかけられるかは、console.log()で確認すると理解が早いと思います。

var string = '{"a": 10,"b": 20,"c": 30}' ;

JSON.parse( string, function( key, value ) {
	console.log( key, value ) ;
} ) ;

デモ

JSON.parse()のデモです。しっかり変換されているかは、コンソールで確認して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var string = '{"a":true,"b":99,"c":"hoge"}' ;
var a = JSON.parse( string ) ;

var string = '{"a":10,"b":20,"c":30}' ;
var b = JSON.parse( string, function ( key, value ) {
	if ( key ) {
		return value + 5 ;
	} else {
		return value ;
	}
} ) ;
/** try it! **/

var results = { a:a, b:b, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( new Text( name + " = " + JSON.stringify( results[name] ) + "\n\n" ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
8+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月26日 (火)
コンテンツを公開しました。