Coldfusion：serializeJSON

I'm currently working on project, where articles load into a scroller through json. The AJAX:

if ($("body#homepage").length) {
        var homepageScroller = new Scroller();
        homepageScroller.url = "http://superyachttimes.2.label-a.nl/default/includes/themes/SuperyachtTimes/assets/js/homepage.json";
        homepageScroller.handlebarsSource = "#article-holder";
        homepageScroller.htmlTemplate = "#holder";
        homepageScroller.jsonKey = "mainlayout";
        homepageScroller.sort = function(response) {
            var data = {};
            data["templateThree"] = [response[0],response[1],response[2]];
            data["templateFour"] = [response[3], response[4], response[5], response[6]];
            return data;
        }

        $(".loadmore-holder a").on("click", function(e) {
            e.preventDefault();
            $(this).bind("click", homepageScroller.clicked());
        });
    }

The URL leads to my homepage.json which has the structure like this:

 "status": "SUCCESS",
    "currentPage": "1",
    "photos" : [
        {
             "articleImage": "assets/img/yacht-photo.jpg",
             "title": "Superyacht Aurora at anchor in Porto Heli",
             "date": "Monday, 14 April"
        }
]

The only problem is that this json is hard-coded. I need it to be dynamic because this constantly loads in the file, so it is infinite.

I get the json output from ColdFusion with this code:

<cfprocessingdirective suppresswhitespace="yes">
<cfsetting showdebugoutput="yes"> 
<cfscript>
       data = {
           title="#item.getValue('title')#", 
           date="#DateFormat($.content('created'),'dddd, dd mmmm yyyy')#",
           description="#item.getValue('summary')#",
           articleImage="#fileurl#",
           url="#$.createHREF(filename=item.getValue('filename'))#"
       };
       serializedStr = serializeJSON(data, true);
</cfscript>
</cfprocessingdirective>

... which gives me this:

{
    "title":"Artikel vandaag 1"
    ,"description":"<p>Artikel artikel artikel artikel artikel<\/p>"
    ,"date":"Wednesday, 09 July 2014"
    ,"url":"\/artikelen\/artikel-vandaag-122\/"
    ,"articleImage":"\/default\/cache\/file\/0C59DDE5-1171-4F23-87514BA123D53A54.jpg"
}

How do I parse that info I get through the iteration into the json file?

So presumably this handler expects response to be an array of at least 7 elements:

    homepageScroller.sort = function(response) {
        var data = {};
        data["templateThree"] = [response[0],response[1],response[2]];
        data["templateFour"] = [response[3], response[4], response[5], response[6]];
        return data;
    }

Now what you have is a structure:

{
    "title": "Artikel vandaag 1",
    "description": "<p>Artikel artikel artikel artikel artikel<\/p>",
    "date": "Wednesday, 09 July 2014",
    "url": "\/artikelen\/artikel-vandaag-122\/",
    "articleImage": "\/default\/cache\/file\/0C59DDE5-1171-4F23-87514BA123D53A54.jpg"
}

So you should be able to reference those like response.title, response['description'] etc.

Although to be honest I'm not sure how your Scroller class ajax request and the sort function which seems to be handling the ajax response, corresponds with what you state is your homepage json. Is the response your array of photos?