JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

Location: <select id="Location" name="Location"></select>
Category: <select id="Category" name="Category"></select>

<button >Search</button>
<div id="result" style="color:#0094ff;font-size:20px;margin-top:100px;">
    Number of Users found : <div id="res"></div>
</div>
<div id="detailedresult" style="color:#0094ff;font-size:20px;margin-top:100px;">
    PID's : <div id="pidRes"></div>
</div>

JavaScript

var jsonList = {
        "Users": [{ "pid": "2", "loc": "Bangalore",  "cat": [{ "dname": "Hotels" }, { "dname":"Travel" }, { "dname":"Banking" }] },
            { "pid": "3", "loc": "Chennai", "cat": [{ "dname":"Hotels" }, { "dname":"Travel" }, { "dname":"Banking" }] },
            { "pid": "4", "loc": "Delhi", "cat": [{ "dname":"Hotels" }, { "dname":"Travel" }, { "dname":"Healthcare" }] },
             { "pid": "5", "loc": "Hyderabad", "cat": [{ "dname":"Retail" }, { "dname":"Insurance" }, { "dname":"Banking" }] },
             { "pid": "6", "loc": "Hyderabad", "cat": [{ "dname":"Ecommerce"}] }]
       } 

var count = Object.keys(jsonList.Users).length

$('#res').html(count);

function loadLocations() {
    //load cities
	var listItems= "";
    var pidres =""; 
    var listItems3= "";
    
    
    for (var i = 0; i < jsonList.Users.length; i++){
        listItems+= "<option value='" + jsonList.Users[i].pid + "' data-ind='"+i+"'>" + jsonList.Users[i].loc + "</option>";
        pidres+= "Location: " +jsonList.Users[i].loc+ ". PID: " +jsonList.Users[i].pid+ ". Number of categories: " +jsonList.Users[i].cat.length + "<br />"
        
        //loop all cats
        for (var j = 0; j < jsonList.Users[i].cat.length; j++) {
             
        listItems3 += "<option value='" + jsonList.Users[i].cat[j].dname + "'>" + jsonList.Users[i].cat[j].dname + "</option>";
            
        
      }
    }
    $("#Location").html(listItems);
    $("#pidRes").html(pidres)
      
    $("#Category").html(listItems3);
    //get rid of duplicates in the dropdown
    var usedNames = {};
	$("#Category > option").each(function () {
    if(usedNames[this.text]) {
        $(this).remove();
    } else {
        usedNames[this.text] = this.value;
    }
});
}


    
loadLocations()