jQuery.getJSON()で、JSON形式のデータを読み込みパースし表示

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery . getJSON(
                'jquery-sample-getJSON-json.js',
                function( data, textStatus ) {
                    if( textStatus == 'success' ) {
                        jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
                    }
                    var title = '<h3>' + data . title + '</h3>';
                    jQuery( '#jquery-sample-getJSON' ) . append( title );
                    jQuery . each( data . color, function( index ) {
                        var name = data . color[index] . name;
                        var colorName = data . color[index] . colorName;
                        var colorCode = data . color[index] . colorCode;
                        var html = '<p style="color:' + colorName + ';">' + name + ':' + colorName + ':' + colorCode + '</p>';
                        jQuery( '#jquery-sample-getJSON' ) . append( html );
                    } );
                }
            );
            if( jQuery( '#jquery-sample-textStatus' ) . text() == '' ) {
                jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
            }
        },
        function() {
            jQuery( '#jquery-sample-getJSON' ) . html( '' );
            jQuery( '#jquery-sample-textStatus' ) . text( '' );
        }
    );
} );
// -->
</script>

{
    "title": "サンプル",
    "color":
        [
            {
                "name": "赤色",
                "colorName": "red",
                "colorCode": "#ff0000"
            },
            {
                "name": "青色",
                "colorName": "blue",
                "colorCode": "#0000ff"
            },
            {
                "name": "緑色",
                "colorName": "green",
                "colorCode": "#008000"
            }
        ]
}