jQuery API の jQuery . parseJSON( json ) は、jsonに指定したJSONドキュメントをパースする。
引数
- json
パースしたい整形式JSON文字列。
戻り値
- Object
オブジェクト。
記述例
var json = '{"name": "赤色","colorName": "red","colorCode": "#ff0000"}';
var parseJSON = jQuery . parseJSON( json );
var name = parseJSON . name;
jQuery( '#sample' ) . text( name );
var parseJSON = jQuery . parseJSON( json );
var name = parseJSON . name;
jQuery( '#sample' ) . text( name );
idが「sample」である要素に、「赤色」と表示する。
実装例（サンプル）
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var json = '{"title": "サンプル","color":[{"name": "赤色","colorName": "red","colorCode": "#ff0000"},{"name": "青色","colorName": "blue","colorCode": "#0000ff"},{"name": "緑色","colorName": "green","colorCode": "#008000"}]}';
var parseJSON = jQuery . parseJSON( json );
var title = '<h3>' + parseJSON . title + '</h3>';
jQuery( '#jquery-sample' ) . append( title );
jQuery . each( parseJSON . color, function( index ) {
var name = parseJSON . color[index] . name;
var colorName = parseJSON . color[index] . colorName;
var colorCode = parseJSON . color[index] . colorCode;
var html = '<p style="color:' + colorName + ';">' + name + ':' + colorName + ':' + colorCode + '</p>';
jQuery( '#jquery-sample' ) . append( html );
} );
} );
// -->
</script>
<!--
jQuery( function() {
var json = '{"title": "サンプル","color":[{"name": "赤色","colorName": "red","colorCode": "#ff0000"},{"name": "青色","colorName": "blue","colorCode": "#0000ff"},{"name": "緑色","colorName": "green","colorCode": "#008000"}]}';
var parseJSON = jQuery . parseJSON( json );
var title = '<h3>' + parseJSON . title + '</h3>';
jQuery( '#jquery-sample' ) . append( title );
jQuery . each( parseJSON . color, function( index ) {
var name = parseJSON . color[index] . name;
var colorName = parseJSON . color[index] . colorName;
var colorCode = parseJSON . color[index] . colorCode;
var html = '<p style="color:' + colorName + ';">' + name + ':' + colorName + ':' + colorCode + '</p>';
jQuery( '#jquery-sample' ) . append( html );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
margin: 10px;
padding: 10px 30px 40px 30px;
background-color: #ffffe0;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
padding: 10px 30px 40px 30px;
background-color: #ffffe0;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
</div>
</div>