REST API with Velocity

jsonactions.vm

#if( $url.query )
    ## Only execute when there is a query called action=json. This is our API route more or less.
    ## For example: localhost:8090/?action=json.getBlogPosts&pages=Test1|||Test2
    ## This will execute the getBlogPosts Macro with "pages" as parameter
    #if( $url.query.indexOf('action=json.') != -1 )
        #set( $actionIdentifier = 'action=json.' )
        #if( $url.query.indexOf('&') != -1 )
            #set( $action = $url.query.substring($actionIdentifier.length(),$url.query.indexOf('&')))
            #set( $i = "$actionIdentifier$action" )
            #set( $l = $i.length() + 1 )
            #set( $params = {})
            #set( $opts = $url.query.substring($l).split('&'))
            #foreach( $opt in $opts )
                #set( $keyvalues = [] )
                #foreach( $keyvalue in $opt.split('=') )
                    #set( $nodisplay = $keyvalues.add($keyvalue))
                #end
                #set( $nodisplay = $params.put($keyvalues.get(0), $keyvalues.get(1)))
            #end
        #else
            #set( $action = $url.query.substring($actionIdentifier.length()))
            #set( $params = [] )
        #end
        #macro( urldecode $uri )
            #set($parts = [
                {"char": "$", "enc": "%24"},
                {"char": "&", "enc": "%26"},
                {"char": "+", "enc": "%2B"},
                {"char": ",", "enc": "%2C"},
                {"char": "/", "enc": "%2F"},
                {"char": ":", "enc": "%3A"},
                {"char": ";", "enc": "%3B"},
                {"char": "=", "enc": "%3D"},
                {"char": "?", "enc": "%3F"},
                {"char": "@", "enc": "%40"},
                {"char": " ", "enc": "%20"},
                {"char": '"', "enc": "%22"},
                {"char": "'", "enc": "%27"},
                {"char": "<", "enc": "%3C"},
                {"char": ">", "enc": "%3E"},
                {"char": "#", "enc": "%23"},
                {"char": "%", "enc": "%25"},
                {"char": "{", "enc": "%7B"},
                {"char": "}", "enc": "%7D"},
                {"char": "|", "enc": "%7C"},
                {"char": "\ ", "enc": "%5C"},
                {"char": "^", "enc": "%5E"},
                {"char": "~", "enc": "%7E"},
                {"char": "[", "enc": "%5B"},
                {"char": "]", "enc": "%5D"},
                {"char": "`", "enc": "%60"},
                {"char": "ä", "enc": "%C3%A4"},
                {"char": "ö", "enc": "%C3%B6"},
                {"char": "ü", "enc": "%C3%BC"},
                {"char": "Ä", "enc": "%C3%84"},
                {"char": "Ö", "enc": "%C3%96"},
                {"char": "Ü", "enc": "%C3%9C"},
                {"char": "—", "enc": "%E2%80%94"},
                {"char": "–", "enc": "%E2%80%93"}
            ])
            #foreach( $part in $parts )
                #set( $uri = $uri.replaceAll($part.enc, $part.char) )
            #end
            $uri
        #end
        ## We use ||| to split our posts, because we found that our blogposts contain all kinds of characters.
        #macro( getBlogPosts $params )
            #set( $posts = [] )
            #set( $objects = [] )
            #foreach( $title in $params.pages.split('%7C%7C%7C') )
                #set( $posts = $blog.getRecent(100000) )
                #define( $decodedTitle )#urldecode($title)#end
                #set( $decodedTitle = $stringEscapeUtils.unescapeHtml($decodedTitle.toString().trim()) )
                #foreach( $post in $posts )
                    #if( $decodedTitle == $post.title )
                        #if( "#isEmpty($post.properties.teaserImage)" != true )
                            #set( $image = $post.properties.teaserImage.asImgSrc )
                        #elseif( $!post.properties.shareImage.asImgSrc.length() > 5 )
                            #set( $image = $post.properties.shareImage.asImgSrc )
                        #else
                            #define( $image )#extractImage($post.content)#end
                        #end
                        #set($nodisplay=$objects.add({"image":"$!image","title":$post.title,"link":$post.absoluteLink}))
                    #end
                #end

            #end
            ## We write the json object here and iterate over the objects we found and output the data we need.
            [
            #foreach( $object in $objects )
                {
                    "image": "$object.image",
                    "title": "$object.title",
                    "link": "$object.link"
                }
                #if( $velocityCount != $objects.size() )
                    ,
                #end
            #end
            ]
        #end
        ## execute the macro named like the action (localhost:8090?action=json.getBlogPosts&pages=test1|||test2|||test3)
        ## Attach the named params as object. (for example: params.pages)
        #evaluate( "#${action}(\$params)" )
        ## Stop all other executing - in your javascript, you have to filter for the stop mark here. so you can't just do a plain response.json().
        #stop
    #end
#end

page.vm

## parse this file before anything else! Also before <head> and DOCTYPE!
#parse("templates/common/jsonactions.vm")


## Place this script at the bottom of the page.vm - this is required to know where to send the request to.
<script>
    window.scrollViewport = {
        spaceKey: '$repository.key',
        labels: '$page.labels',
        page: {
            title: "$stringEscapeUtils.unescapeHtml($page.title)"
        },
        home: '$viewport.absoluteLink',
    }
</script>

request.js

// somewhere in your lazy loading function, after the DOM is ready probably

var posts = ['test1', 'test2', 'test3'] // you could also create a jsonaction to retrieve the blogposts
$.get(
    scrollViewport.home+'?action=json.getBlogPosts&pages='+encodeURIComponent(posts.join('|||')),
    function(data) {
        data = data.replace(/#footer.*/g,'')
        try {
            var blogPosts = JSON.parse(data)
        } catch(e) {
            console.log(e)
        }
    }
)