JavaScript, best way to use data from the loop

You can use WP_Query to get almost any post data out of your WordPress install.

$sub_pages = new WP_Query(
    array( 
        'post_parent' => 3,
        'post_type' => 'page'
    )
);

print_r($sub_pages->posts);

This would get you the following:

Array
(
    [0] => WP_Post Object
        (
            [ID] => 94
            [post_author] => 1
            [post_date] => 2015-08-20 11:19:27
            [post_date_gmt] => 2015-08-20 10:19:27
            [post_content] => Business operating...

An array full of posts. So all you need to do is json encode this, and wrap it in script tags.

<script type="text/javascript">
    var post_info = <?php echo json_encode($sub_pages->posts); ?>;
</script>

This will output:

<script type="text/javascript">
    var post_info = [{"ID":94,"post_author":"1","post_date":"2015-08-20 11:19:27","post_date_gmt":"2015-08-20 10:19:27","post_content":"Business operating

So now, if I put this before where I load my JavaScript, i.e

<script type="text/javascript">
    var post_info = <?php echo json_encode($sub_pages->posts); ?>;
</script>
<script type="text/javascript" src="https://wordpress.stackexchange.com/questions/200464/script.js"></script>

In script.js I can just go

console.log(post_info[0].ID);

And we’ll get 94 in the console.

Related Posts: