JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCm577yx4uU0TW5g_uFQH3wg_fUjAHUp88",
    authDomain: "flowerpower-c349a.firebaseapp.com",
    databaseURL: "https://flowerpower-c349a.firebaseio.com",
    storageBucket: "flowerpower-c349a.appspot.com",
    messagingSenderId: "29712322543"
  };
  firebase.initializeApp(config);
</script>



<span id="filter">
  
</span>


<ul>
</ul>

CSS

label {
  float: left;
  width: 100%;
}

JavaScript

var ref = firebase.database().ref("florists");



var filter = {};

ref.on("child_added", function(florists) {
    
    if (florists.val().products)
    {
    	var flowers = florists.val().products;
      
      for (var flower in flowers) {
				var currentFlower = flowers[flower];
        
      	// append elements to DOM-list
      	//console.log(currentFlower);
        
        for (var attribute in currentFlower.attributes) {
        		var currentAttribute = currentFlower.attributes[attribute];
            
            for (var value in currentAttribute)
            {
            //console.log("value: ", value, attribute);
            
              if (!filter[attribute])
              {
              filter[attribute] = {};
              }
              if (!filter[attribute][value])
              {
              	filter[attribute][value] = 1;
              }
              else 
              {
                filter[attribute][value] += 1;
              }
            
            }
        }
        
      }
        appendFilter();
    }
});



function appendFilter() {
	for	(var attribute in filter)
  {
  	$("#filter").append("<label>" + attribute + "</label>");
    
    for (var item in filter[attribute])
    {
    	$("#filter").append("<span>" + item + ": (" + filter[attribute][item] + ")</span> <br>");
    }
    
    $("#filter").append("<hr/>");
  }
}