JSFiddle - React, Tailwind, and code Playground

by Shashank Srivastava

HTML

<div id="result">

</div>

CSS

.qmx-column-picker {
    height: 44px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: transparent;
    height: 44px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.qmx-column-picker .content {
    width: auto;
    white-space: nowrap;
    height: 54px;
    box-sizing: border-box;
    /*background: #F5F1F2;*/
}

.qmx-column-picker .content .item {
    display: inline-block;
    background: #F5F1F2;
    padding-top: 12px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    /*border-bottom-color: #F5A1F2;*/
    height: 44px;
    box-sizing: border-box;
    margin-left: -3px;
    /*-webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;*/
}

.qmx-column-picker .item a {
    text-decoration: none;
    color: black;
    padding: 0 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.qmx-column-picker::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important
}

JavaScript

var arr = ['a','b','c','d'];
var arrCopy = JSON.parse(JSON.stringify(arr));

arrCopy.pop();

//document.getElementById('result').innerHTML += JSON.stringify(arr);
//document.getElementById('result').innerHTML += JSON.stringify(arrCopy);

var obj = {
	2: {
		data: {
			8: { label: 'Basics' },
			9: { label: 'Aluminium Elite Moon'},
			10: { label: 'Color Bulbs'}
		},
		label: 'LED Bulbs'
	}
};
var path = ['2','8'];

function getLabelOfCategory(obj, path) {
	var pathArr = JSON.parse(JSON.stringify(path));
	var returnData;
	angular.forEach(obj, function(value, key) {
        if(key === pathArr[0] && pathArr.length > 0) {
            if(pathArr.length > 1 && Object.keys(value.data).indexOf(pathArr[1]) >= 0) {
                pathArr.shift();
                returnData = getLabelOfCategory(value.data, pathArr);
				
            } else {
                returnData = value.label;
        	} 
    	}
	});
	return returnData;
}

document.getElementById('result').innerHTML += getLabelOfCategory(obj, path);