How to build multiple cards with photo and name(CardHeaders) vertically to show multiple user details?

Question

I am creating gmail addon, i have show list of users after making some http call. Possible way was to make using CardHeader in google script. Can someone help me how can i create multiple cards in single page and show my details as list? Sample Code. How can i load multiple cards in place of newCard in my code?

function getRedirect(pageId,title){
   var redirectform = CardService.newAction()
        .setFunctionName('redirectCallback')
        .setParameters({page:pageId.toString()});
    var redirectButton = CardService.newTextButton()
    .setText(title)
     .setOnClickAction(redirectform);
   return redirectButton;
}
function redirectCallback(e){
  var pageId = parseInt(e.parameters.page);
   var newCard,redirectBtn;
   if(pageId == 1){
      redirectBtn = getRedirect(2,"Next");
       newCard = CardService.newCardBuilder()
                     .setHeader(CardService.newCardHeader()
                                         .setTitle("Page2"))
                     .addSection(CardService.newCardSection()
                           .addWidget(CardService.newButtonSet()
                                 .addButton(redirectBtn))).build()
   }
    var navigate = CardService.newNavigation().pushCard(newCard);
    return CardService.newActionResponseBuilder()
                       .setNavigation(navigate).build()  
   }

   function buildAddOn() {
      var header = getHeaderSection();
      var body = getBody();
      var submitForm = CardService.newAction()
                                  .setFunctionName('openLinkCallback');
       var submitButton = CardService.newTextButton()
                                     .setText('Open Greatwork')
                                  .setOnClickAction(submitForm);
       var redirectBtn = getRedirectBtn(1,"Next");
       var mainCard = CardService
       .newCardBuilder()
       .addSection(CardService.newCardSection()
      .addWidget(CardService.newButtonSet().addButton(submitButton)))
      .addSection(CardService.newCardSection()             
      .addWidget(CardService.newButtonSet().addButton(redirectBtn)))
      .build();
  return mainCard;
}

Answer 1

Looking at what you want, I would suggest you use card navigation. The way you are setting up your individual card works well, and following the instruction in the example at that link can help you create what I feel you are working towards.

The link also provides an explanation on advanced card navigation, so that you can go through several different cards easily. Here is an overview on both ways of navigating cards.