Json data dynamic in wordpress

// json data dynamic in wordpress

<?php
$loop = 0;
// Example argument that defines three posts per page.
$args = array( 'posts_per_page' => -1,'post_type'=>'json' );

// Variable to call WP_Query.
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    // Start the Loop
    while ( $the_query->have_posts() ) : $the_query->the_post();
	$loop ++;
        ?><div id="demo<?php echo $loop;?>"></div><?php
    // End the Loop
    endwhile;
else:
    // If no posts match this query, output this text.
    _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
wp_reset_postdata();



?>





<script>
function _(x){return window.document.getElementById(x)}
var text = '{ "employees" : [' +
 '{ "firstName":"<?php the_title();?>" , "lastName":"<?php the_title();?>" },'+
<?php
$loop = 0;
// Example argument that defines three posts per page.
$args = array( 'posts_per_page' => -1,'post_type'=>'json' );

// Variable to call WP_Query.
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    // Start the Loop
    while ( $the_query->have_posts() ) : $the_query->the_post();
	$last_name = get_post_meta( $post->ID, 'last_name', true );
	$loop++;
    ?>
 '{ "firstName":"<?php the_title();?>" , "lastName":"<?php echo $last_name;?>" },'+
	<?php
    // End the Loop
    endwhile;
else:
    // If no posts match this query, output this text.
    _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
wp_reset_postdata();

?>'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

var obj = JSON.parse(text);

//console.log(obj.employees.length); // length 4

var totalpost = obj.employees.length-1; // 4-1 = 3

for(var i = 1;i<totalpost;i++){
	_("demo"+i).innerHTML = obj.employees[i].firstName + " " + obj.employees[i].lastName;

	//console.log( ("demo"+i) );
}


</script>


***********************************************************************************
function json_setup_post_type() {
  register_post_type( 'json',
    array(
      'labels' => array(
        'name' => __( 'Json Post' ),
        'singular_name' => __( 'Json Post Type' ),
		'add_new'=>_('Add New Json')
      ),
      'public' => true,
	   'menu_icon'=> 'dashicons-camera',  /* For Dashicons Menu */
      'has_archive' => true,
	  'rewrite'=> array( 'slug' => 'json' ),
	  'supports'=> array( 'title' )

    )
  );
}
add_action( 'init', 'json_setup_post_type' );


**************************************************************************************

// custom mete box CMB2
function yourprefix_register_demo_metabox() {
	$prefix = 'yourprefix_demo_';

	/**
	 * Sample metabox to demonstrate each field type included
	 */
	$cmb_demo = new_cmb2_box( array(
		'id'            => 'metabox',
		'title'         => esc_html__( 'Test Metabox', 'cmb2' ),
		'object_types'  => array( 'json'), // Post type
		// 'show_on_cb' => 'yourprefix_show_if_front_page', // function should return a bool value
		// 'context'    => 'normal',
		// 'priority'   => 'high',
		// 'show_names' => true, // Show field names on the left
		// 'cmb_styles' => false, // false to disable the CMB stylesheet
		// 'closed'     => true, // true to keep the metabox closed by default
		// 'classes'    => 'extra-class', // Extra cmb2-wrap classes
		// 'classes_cb' => 'yourprefix_add_some_classes', // Add classes through a callback.
	) );


	$cmb_demo->add_field( array(
		'name' => esc_html__( 'Test Text Small', 'cmb2' ),
		'desc' => esc_html__( 'field description (optional)', 'cmb2' ),
		'id'   =>'last_name',
		'type' => 'text',
		'default'=>''
		// 'repeatable' => true,
		// 'column' => array(
		// 	'name'     => esc_html__( 'Column Title', 'cmb2' ), // Set the admin column title
		// 	'position' => 2, // Set as the second column.
		// );
		// 'display_cb' => 'yourprefix_display_text_small_column', // Output the display of the column values through a callback.
	) );

	$cmb_demo->add_field( array(
		'name' => esc_html__( 'Color Picker', 'cmb2' ),
		'desc' => esc_html__( 'field description (optional)', 'cmb2' ),
		'id'   =>'text_color',
		'type' => 'colorpicker',
		'default'=>'#111'
	) );

	$cmb_demo->add_field( array(
		'name' => esc_html__( 'Color Picker', 'cmb2' ),
		'desc' => esc_html__( 'field description (optional)', 'cmb2' ),
		'id'   =>'bg_color',
		'type' => 'colorpicker',
		'default'=>'#fff'
	) );





}



// dynamic css file
ob_start();
require_once( get_stylesheet_directory().'/css/filestyle.php' );
file_put_contents( get_stylesheet_directory()."/css/options.css",ob_get_clean());


************************************************************************************************************

// css dynamic

<?php
$loop = 0;
// Example argument that defines three posts per page.
$args = array( 'posts_per_page' => -1,'post_type'=>'json' );

// Variable to call WP_Query.
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    // Start the Loop
    while ( $the_query->have_posts() ) : $the_query->the_post();
	$text_color = get_post_meta( $post->ID, 'text_color', true );
	$bg_color = get_post_meta( $post->ID, 'bg_color', true );
	$loop ++;
?>
#demo<?php echo $loop;?>{color:<?php echo $text_color;?>;background-color:<?php echo $bg_color;?>;}
<?php


    // End the Loop
    endwhile;
else:
    // If no posts match this query, output this text.
    _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
wp_reset_postdata();

?>