CODEWITHSUNDEEP
javascript
Taimoor Ahmed
Taimoor Ahmed

Reputation: 69

If condition not giving the desired result

I'm using javascript to show my data in a table which shows the columns of Name, Sex, Looks and Age.

For Looks column, I have written a script so that if the gender is male, the column should show the value of Looks as "handsome" and if the gender is female the column should show the value of Looks as "beautiful" in the value.

But it is showing only "handsome" for both male and female gender.

Following is my code:

   var myObj = [{name: "Taimoor", sex: "male", age: "Thirty One"},{name: 
   "Nida", sex: "female", age: "Twenty Nine"}];

   var table = "<tr><td>Name</td><td>Sex</td><td>Looks</td><td>Age</td> 
   </tr>";

   function myLooks() {
   for (ii in myObj) {
   var looks = "";
   if (myObj[ii].sex == "male") {looks = "handsome"}
   else {looks = "beautiful"};
   return looks;
   }
   }

   for (i=0; i <myObj.length; i++) {

   table += "<tr><td>" + myObj[i].name + "</td><td>" + myObj[i].sex + " 
   </td><td>" + myLooks() + "</td><td>" + myObj[i].age + "</td></tr>"





   document.getElementById("demo").innerHTML = table;

Upvotes: 0

Views: 57

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65808

First, myObj is an Array and you are using a for/in loop. for/in loops should not be used with Arrays because they iterate all the properties of the Array object, not just the indexes. To simply iterate an Array, you can use a regular counting loop, .forEach() or for/of.

You are also looping a second time and calling the function a number of times, when you can just run the function once and loop over the array once.

var myObj = [
  {name: "Taimoor", sex: "male", age: "Thirty One"},
  {name: "Nida", sex: "female", age: "Twenty Nine"}
];

var headerRow = "<tr><td>Name</td><td>Sex</td><td>Looks</td><td>Age</td></tr>";
var table = document.getElementById("demo");
table.innerHTML = headerRow;

function myLooks() {
  var newRow = "";
  var looks = "";
  
  myObj.forEach(function(obj) {
   if (obj.sex == "male") {
     looks = "handsome";
   } else {
     looks = "beautiful"
   };
   newRow = "<tr><td>" + obj.name + "</td><td>" + obj.sex + 
   "</td><td>" + looks + "</td><td>" + obj.age + "</td></tr>"

   table.innerHTML += newRow;
  });
}

myLooks();
table, td { border:1px solid #e0e0e0;}
<table id="demo"></table>

Upvotes: 0

Titus
Titus

Reputation: 22474

Currently, your myLooks function sets the looks variable based on the first item in the myObj array and returns after that. Instead of that, you can pass the value you want to determine the looks of to the function as a parameter, here is an example:

var myObj = [{
  name: "Taimoor",
  sex: "male",
  age: "Thirty One"
}, {
  name: "Nida",
  sex: "female",
  age: "Twenty Nine"
}];

var table = "<tr><td>Name</td><td>Sex</td><td>Looks</td><td>Age</td>  </tr>";

function myLooks(obj) {
  var looks = "";
  if (obj.sex == "male") {
    looks = "handsome"
  } else {
    looks = "beautiful"
  };
  return looks;
}

for (i = 0; i < myObj.length; i++) {
  table += ("<tr><td>" + myObj[i].name + "</td><td>" + myObj[i].sex + "  </td><td>" + myLooks(myObj[i]) + "</td> <td> " + myObj[i].age + " </td></tr > ");
}

document.getElementById("demo").innerHTML = table;
<table id="demo"></table>

Upvotes: 0

Web Nexus
Web Nexus

Reputation: 1158

You don't need a loop you can pass the sex into the function and get the correct string returned:- 

var myObj = [{name: "Taimoor", sex: "male", age: "Thirty One"},{name:
    "Nida", sex: "female", age: "Twenty Nine"}];

function myLooks(sex) {
  if (sex == "male") {
    return  "handsome"
  }
  else {
    return  "beautiful"
  }
}

for (i = 0; i < myObj.length; i++) {
  console.log(myObj[i].name, myObj[i].sex, myLooks(myObj[i].sex), myObj[i].age);
}

Upvotes: 1

Related Questions