JSFiddle - React, Tailwind, and code Playground

by TanyRay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

JavaScript

var TAG_SEPARATOR_HTML_TEMPLATE = _.template('<%- separator %>');
    var NEW_LINE_SEPARATOR = '<br/>';
    var IS_TEMPLATE = TAG_SEPARATOR_HTML_TEMPLATE({ separator: ' IS ' });
    var IS_ONE_OF_TEMPLATE = TAG_SEPARATOR_HTML_TEMPLATE({ separator: ' IS ONE OF ' });
    var OR_SEPARATOR = NEW_LINE_SEPARATOR + TAG_SEPARATOR_HTML_TEMPLATE({ separator: 'OR ' });
    var AND_SEPARATOR = TAG_SEPARATOR_HTML_TEMPLATE({ separator: ' AND ' });
    
var actions = [
  {
    "name": "trololol",
    "tags": [
      {
        "key": "title",
        "value": "Product"
      },
      {
        "key": "title",
        "value": "Trololol"
      },
      {
        "key": "hotel",
        "value": "Hotel"
      }
    ]
  },
  {
    "name": "copy of copy of Post Product Feedback",
    "tags": [
      {
        "key": "tour",
        "value": "treet"
      }
    ]
  }
];

var data = _.map(actions, function (action) {
  var tags = _.chain(action.tags).reduce(function (memo, tag) {
    memo[tag.key] = memo[tag.key] || [];
    memo[tag.key].push(tag.value);
    return memo;
  }, {}).value();
  
  return _.chain(tags).keys().reduce(function(memo, tagLabel) {
  	var values = tags[tagLabel].map(function(tagValue) { 
      return {
      	value: tagValue
      };
    });
    memo['tags'] = memo['tags'] || [];
    memo['tags'].push({
    	key: tagLabel,
      name: action.name,
      values: values
     });
  	return memo;
  }, {}).value();  
});
console.dir(data);

function campaignTagFormatter(tagConditions) {
  var result = _.chain(tagConditions).map(function(tagCondition) {
    var joinedKeyValueTagPairs = tagCondition.tags.map(function (tag) {
      var isMultipleTagValues = tag.values.length > 1;
      var labelValueTagSeparator = isMultipleTagValues ? IS_ONE_OF_TEMPLATE : IS_TEMPLATE;
      return tag.key + labelValueTagSeparator + _.pluck(tag.values, 'value').join(', ');
    });

    return joinedKeyValueTagPairs.length > 1 ? joinedKeyValueTagPairs.join(AND_SEPARATOR) :...