Trello power-up display more than one card-badge

Question

I am new to trello, I would like to know how can I display more than one card-badge when my trello power-up is initialize?

the problem here is that only one card-badge is shown.

here is my initialize code:

    TrelloPowerUp.initialize({
  'board-buttons': function(t, options){
    return [{
      icon: WHITE_ICON,
      text: 'Time Manager',
      callback: boardButtonCallback
    }];
  },  
  'card-badges': function(t, options){
    return {
          title: 'First card-badge',
          text: 'Not valid',
          icon: GRAY_ICON,
          color: 'blue',
          };
  },'card-badges': function(t, options){
    return {
          title: 'Second card-badge',
          text: 'Valid',
          icon: GRAY_ICON,
          color: 'red',
          };
  },
  'card-detail-badges': function(t, options) {
    return initializeCardBadges(t);
  },
});

the "Second card-badge" is shown, but the "First card-badge" is not showing. is this possible to make both card badge appear.

Answer 1

A couple problems here:

   return {
          title: 'First card-badge',
          text: 'Not valid',
          icon: GRAY_ICON,
          color: 'blue',
          }; // <- semicolon

This code has a semicolon on the return statement, so it will return only that one card badge, then get overridden when it gets to the second 'card-badges' so only the second one will be there.

Instead, you should return an array of objects, and make sure to return this array under one 'card-badges' function.

For example:

'card-badges': function(t, options){
      return [{
                title: 'First card-badge',
                text: 'Not valid',
                icon: GRAY_ICON,
                color: 'blue'
             }, {
                title: 'Second card-badge',
                text: 'Valid',
                icon: GRAY_ICON,
                color: 'red'
             }];

}