Search code examples
javascriptnode.jsbotframeworkchunks

split json into carousel cards

I get the results from a JSON file and I want to display it in carousel, how can I do it?

Here is the code:

var req = http.request(options, function (res) {
    console.log('STATUS: ' + res.statusCode);
    if (res.statusCode !== 201) {
        session.send("Sorry, service is not reachable at the moment, please try again later");
    }
    //session.send(res.statusCode.toString());
    var chunks = [];

    res.on("data", function (chunk) {
        chunks.push(chunk);

        var json = chunk.toString();
        var graph = JSON.parse(json);
        var attachmentList = [];
        for (var i = 0; i < graph.clauses.length; i++) {
            var obj = graph.clauses[i];
            console.log(obj);
            var clause_id;
            var clause_text;

            for (var key in obj) {
                clause_id = key;
                clause_text = obj[key].toString();
                // session.send(clause_id+"<br>"+clause_text);
            }

            let card = new botbuilder_1.HeroCard(session)
                .title(clause_id)
                .subtitle(clause_text)
                .buttons([botbuilder_1.CardAction.imBack(session, 'Mark as Relevant', 'Mark as Relevant')]);

            let msg = new botbuilder_1.Message(session);
            msg.attachmentLayout(botbuilder_1.AttachmentLayout.carousel);
            msg.attachments([card]);
            session.send(msg);

            // session.endDialog(msg); 
        }
    });
});

Here is the screenshot of the results:

enter image description here

Solution

  • You're sending a message on each iteration of the for loop, and each message only has one attachment. Try sending one message after the for loop and give that message the whole list of attachments.

    var attachmentList = [];
for (var i = 0; i < graph.clauses.length; i++) {
    var obj = graph.clauses[i];
    console.log(obj);
    var clause_id;
    var clause_text;
    for (var key in obj) {
        clause_id = key;
        clause_text = obj[key].toString();
        // session.send(clause_id+"<br>"+clause_text);
    }
    let card = new botbuilder_1.HeroCard(session)
        .title(clause_id)
        .subtitle(clause_text)
        .buttons([botbuilder_1.CardAction.imBack(session, 'Mark as Relevant', 'Mark as Relevant')]);

    attachmentList.push(card);
}

let msg = new botbuilder_1.Message(session);
msg.attachmentLayout(botbuilder_1.AttachmentLayout.carousel);
msg.attachments(attachmentList);
session.send(msg);