If condition not giving the desired result

Question

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;

Instead of having a loop inside the `myLooks` function you should pass the value at the current iteration as a parameter and return something based on that value's properties. — Titus, Jan 27 '19 at 21:53

Web Nexus · Accepted Answer · 2019-01-27T22:01:02.340

1

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);
}

edited Jan 27 '19 at 22:01

answered Jan 27 '19 at 21:56

Web Nexus

1,150
9
28

2

It should be (sex == “male”). Regards – Albeis Jan 27 '19 at 22:00

Scott Marcus · Answer 2 · 2019-01-28T21:47:35.637

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>

It solved the Looks column issue but why is it returning the 1st row two times? — Taimoor Ahmed, Jan 28 '19 at 20:21
Oh, that's a small typo when inserting the new row. I used `+=` when it should have been just `=`. I've corrected it. — Scott Marcus, Jan 28 '19 at 21:45

score 0 · Answer 3 · answered Jan 27 '19 at 22:03

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>

If condition not giving the desired result

3 Answers3