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"},{"dname":"Banking"}] }]
       } 

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 />"
    }
    $("#Location").html(listItems);
    $("#pidRes").html(pidres)
    //load fist city
    for (var i = 0; i < jsonList.Users[0].cat.length; i++) {
             
        listItems3 += "<option value='" + jsonList.Users[0].cat[i].dname + "'>" + jsonList.Users[0].cat[i].dname + "</option>";
        
    }
    $("#Category").html(listItems3);
    
}

$("#Location").change(function() {
    cur = ""
    $("#cur").html("")
	var userIndex = $(this + "option:selected").data("ind")
    var listItems3 = ""
    cur = $(this).text() + " with Categories: "
    for (var i = 0; i < jsonList.Users[userIndex].cat.length; i++) {
             
        listItems3 += "<option value='" + jsonList.Users[userIndex].cat[i].dname + "'>" + jsonList.Users[userIndex].cat[i].dname + "</option>";
        
    }
    $("#Category").html(listItems3);
 ...