wordpress post loop in javascript

How can I put WordPress post loop Codes in javascript?

function top_news() {
echo '<div class="news"></div>';
$query = get_posts(array(
    'showposts' => 3,
    'type' => 'topnews'
));
foreach ($query as $news) :
    the_post($news);
endforeach;
?>
<script type="text/javascript">
    $(function () {
        $(".news").typed({
            strings: ["here........."],
            typeSpeed: 1,
            showCursor: 0,
            loop: 1
        });
    });
</script><?php

}

<?php
    ob_start();
    query_posts(array('post_type' => 'topnews'));

    while (have_posts()) : the_post(); ?>
        {
            // the_title() can use a false to return the value for use with strip_tags (apparently)
            'title'         : '<?php echo stripslashes(the_title(false)); ?>',
            // Where is this $desc coming from?

            'button_list'   : [
                { 'title':'Demo', 'url' : 'http://bonchen.net/' },
                { 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
            ],
            'tags'          : ['Portrait']
        }, <?php
    endwhile;
    $data   =   ob_get_contents();
    ob_end_clean();
?>
<script type="text/javascript">
    $(function(){
            <?php echo $data; ?>
        });
</script>