Mahi Mahi - 15 days ago 6
HTML Question

How to get the matched employee details in a single search without looping

I have created a two json array for employee personal and company details.
Based on the value give in input field, I match both the tables and display the corresponding employees personal and company details in a single table.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
var employee=
{
"EmployeesPersonalDetails" :
[
{
"employeeID":01,
"region":"Coimbatore",
"phoneNumber":9087653456,
"emailAddress":"abc@gmail.com"
},
{

"employeeID":02,
"region":"Avinashi",
"phoneNumber":8990908765,
"emailAddress":"def@gmail.com"
},
{
"employeeID":03,
"region":"Thippur",
"phoneNumber":9089898990,
"emailAddress":"ghi@gmail.com"
},
{
"employeeID":04,
"region":"Madurai",
"phoneNumber":9012345990,
"emailAddress":"jkl@gmail.com"
},
{
"employeeID":05,
"region":"Thippur",
"phoneNumber":9067890990,
"emailAddress":"mno@gmail.com"
},
{
"employeeID":06,
"region":"Thippur",
"phoneNumber":9345218990,
"emailAddress":"pqr@gmail.com"
}
]
}

var empcmpy={
"EmployeesCompanyDetails" :[
{
"name" : "Mike",
"employeeID" : 01,
"designation" : "Software engineer"
},
{
"name" : "Westlee",
"employeeID" : 02,
"designation" : "Software engineer trainee"
},
{
"name" : "Denise",
"employeeID" : 03,
"designation" : "Software test engineer"
},

{ "name" : "Matthew",
"employeeID" : 04,
"designation" : "Software Test engineer trainee"
},
{
"name" : "Mark",
"employeeID" : 05,
"designation" : "Project Manager"
},
{
"name" : "Karla",
"employeeID" : 06,
"designation" : "Associate Project Manager "
}
]
}
function employeeDetails(){
var eID = document.getElementById('eid').value;
var flag = false;
if(eID != "" ){
for(i=0;i<employee.EmployeesPersonalDetails.length;i++){
for(j=0;j<empcmpy.EmployeesCompanyDetails.length;j++){
if(employee.EmployeesPersonalDetails[i].employeeID == eID && empcmpy.EmployeesCompanyDetails[j].employeeID == eID ){
flag=true;
document.getElementById('pro2').style.display = "block";
var tblRow = "<tr>" + "<td>" + empcmpy.EmployeesCompanyDetails[j].name + "</td>"
+"<td>" + empcmpy.EmployeesCompanyDetails[j].employeeID + "</td>"
+ "<td>" + employee.EmployeesPersonalDetails[i].phoneNumber + "</td>"
+"<td>" + employee.EmployeesPersonalDetails[i].emailAddress + "</td>"
+"<td>" + empcmpy.EmployeesCompanyDetails[j].designation + "</td>"
+"<td>" + employee.EmployeesPersonalDetails[i].region + "</td>"
+ "</tr>";
$(tblRow).appendTo("#employee1 tbody");
}
}
}
if(flag==false)
alert ("Not matched");
}

else
{
alert ("Emp id is empty");
}
}
</script>
</head>
<body>
<div class="wrapper">
<div>
Enter Emp id : <input type ="text" id="eid" name="eid"/>
<button id="getEmpdetails" onclick="employeeDetails()"> GetEmployeeDetails</button>
</div>
<div id ="pro2" class="profile2" style="display:none;">
</br> <table id= "employee1" border="2">
<thead>
<th>Name</th>
<th>ID</th>
<th> Phone Number</th>
<th>Email Address</th>
<th>Designation</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>

</div>
</div>
</body>
</html>


I have used two loops for doing these, to find the nth employee it has to loop n times. how can i optimize it.

UPDATE:

function employeeDetails(){
var eID = document.getElementById('eid').value;
var flag = 1;
if(eID != "" ){
for(i=0;i<employee.EmployeesPersonalDetails.length;i++){
if(employee.EmployeesPersonalDetails[i].employeeID == eID ){
flag++;
document.getElementById('pro2').style.display = "block";
var tblRow = "<tr>"
+ "<td>" + employee.EmployeesPersonalDetails[i].phoneNumber + "</td>"
+"<td>" + employee.EmployeesPersonalDetails[i].emailAddress + "</td>"
+"<td>" + employee.EmployeesPersonalDetails[i].region + "</td>";
$(tblRow).appendTo("#employee1 tbody");
}
}
for(j=0;j<empcmpy.EmployeesCompanyDetails.length;j++){
if( empcmpy.EmployeesCompanyDetails[j].employeeID == eID ){
flag++;
document.getElementById('pro2').style.display = "block";
var tblRow = "<td>" + empcmpy.EmployeesCompanyDetails[j].name + "</td>"
+"<td>" + empcmpy.EmployeesCompanyDetails[j].employeeID + "</td>"

+"<td>" + empcmpy.EmployeesCompanyDetails[j].designation + "</td>";
$(tblRow).appendTo("#employee1 tbody");
}
}
if(flag!=3)
alert ("Not matched");
}

else
{
alert ("Emp id is empty");
}
}

Answer

You could do something like this,

<html>
<head>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
    var employee= 
       {
  "EmployeesPersonalDetails" : 
    [
       {
           "employeeID":01,
           "region":"Coimbatore",
           "phoneNumber":9087653456,
           "emailAddress":"abc@gmail.com"
       },
       {

           "employeeID":02,
           "region":"Avinashi",
           "phoneNumber":8990908765,
           "emailAddress":"def@gmail.com"
       },
       {
           "employeeID":03,
           "region":"Thippur",
           "phoneNumber":9089898990,
           "emailAddress":"ghi@gmail.com"
       },
       {
           "employeeID":04,
           "region":"Madurai",
           "phoneNumber":9012345990,
           "emailAddress":"jkl@gmail.com"
       },
       {
           "employeeID":05,
           "region":"Thippur",
           "phoneNumber":9067890990,
           "emailAddress":"mno@gmail.com"
       },
       {
           "employeeID":06,
           "region":"Thippur",
           "phoneNumber":9345218990,
           "emailAddress":"pqr@gmail.com"
        }
    ]
    }

var empcmpy={
"EmployeesCompanyDetails" :[
    {   
                "name" : "Mike",
                "employeeID" : 01,
                "designation" : "Software engineer"
    },
    {
                "name" : "Westlee",
                "employeeID" : 02,
                "designation" : "Software engineer trainee"
    },
    {   
                "name" : "Denise",
                "employeeID" : 03,
                "designation" : "Software test engineer"
    },

        {       "name" : "Matthew",
                "employeeID" : 04,
                "designation" : "Software Test engineer trainee"
    },
    {   
                "name" : "Mark",
                "employeeID" : 05,
                "designation" : "Project Manager"
    },
    {   
                "name" : "Karla",
                "employeeID" : 06,
                "designation" : "Associate Project Manager "
    }
]
}
function employeeDetails(){
      var eID = document.getElementById('eid').value; 
      var flag = false;
      var matchemp;
      var mathccomp;
      var empflag=false;
      var compflag=false;
      
         if(eID != "" ){
        	 for(emp in employee.EmployeesPersonalDetails){
        		 if(employee.EmployeesPersonalDetails[emp].employeeID==eID){
        			 empflag=true;
        			 matchemp=employee.EmployeesPersonalDetails[emp];
        			 break;
        		 }
        	 }
        	 for(comp in empcmpy.EmployeesCompanyDetails){
        		 if(empcmpy.EmployeesCompanyDetails[comp].employeeID == eID ){
        			 compflag=true
        			 mathccomp=empcmpy.EmployeesCompanyDetails[comp];
        			 break;
        		 }
        	 }
        	 
        	 if(empflag&&compflag){
        		 document.getElementById('pro2').style.display = "block";
                 var tblRow = "<tr>" + "<td>" + mathccomp.name + "</td>" 
                              +"<td>" + mathccomp.employeeID + "</td>"  
                              + "<td>" + matchemp.phoneNumber + "</td>" 
                              +"<td>" + matchemp.emailAddress + "</td>"
                              +"<td>" + mathccomp.designation + "</td>"
                              +"<td>" + matchemp.region + "</td>" 
                              + "</tr>";
                 $(tblRow).appendTo("#employee1 tbody"); 
        	 }
        	 else{
        		 alert ("Not matched"); 
        	 }
         }
         else 
            {
                alert ("Emp id is empty");
            }
    }
</script>
</head>
<body>
	<div class="wrapper">
		<div>
			Enter Emp id : <input type="text" id="eid" name="eid" />
			<button id="getEmpdetails" onclick="employeeDetails()">
				GetEmployeeDetails</button>
		</div>
		<div id="pro2" class="profile2" style="display: none;">
			</br>
			<table id="employee1" border="2">
				<thead>
					<th>Name</th>
					<th>ID</th>
					<th>Phone Number</th>
					<th>Email Address</th>
					<th>Designation</th>
					<th>City</th>
				</thead>
				<tbody>
				</tbody>
			</table>

		</div>
</body>
</html>

You can use two different loops and then can break once the conditions have been satisfied as shown above in the snippet