JSON.parse() - 文字列をオブジェクトに変換する
JSON.parse()は文字列をJSONとして解析し、JavaScriptで利用できるオブジェクトに変換するメソッドです。
概要
説明
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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 8+ | ● | ● | ● |
関連記事
- JSON.stringify()
- JSON.stringify()は、JSONオブジェクトを文字列に変換するメソッドです。文字列に変換する際、オブジェクトはシリアライズされます。例えば、値がnew Date()の場合、toJSON()が実行されて、JSONシリアライズした値に変換されて文字列化します。
- JSON
- JSONはJSONデータを取り扱うための機能を備えたオブジェクトです。JSONをオブジェクトから文字列に変換するstringify()、文字列からオブジェクトに変換するparse()の2つの関数を持っています。JSONのデータ変換のアルゴリズムはECMA-404で定義されています。
- Array.prototype.findIndex()
- Array.prototype.findIndex()は、配列から条件を満たす要素のインデックス番号を取得するメソッドです。前方から後方にかけて検索し、条件を満たす一番最初の要素だけが返ります。条件を満たす要素が1つもない場合、undefinedが返ります。なお、find()は、値ではなく、インデックス番号が返ります。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。