J'utilise javascript pour afficher mes données dans un tableau qui montre les colonnes de nom, sexe, apparence et âge.

Pour la colonne Looks, j'ai écrit un script de sorte que si le sexe est masculin, la colonne doit afficher la valeur de Looks comme "beau" et si le sexe est féminin, la colonne doit afficher la valeur de Looks comme "beautiful" dans la valeur .

Mais il ne montre que "beau" pour le sexe masculin et féminin.

Voici mon 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;
0
Taimoor Ahmed 28 janv. 2019 à 00:47

3 réponses

Meilleure réponse

Vous n'avez pas besoin d'une boucle, vous pouvez passer le sexe dans la fonction et obtenir la chaîne correcte retournée: -

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);
}
1
Hensler Software 27 janv. 2019 à 22:01

Actuellement, votre fonction myLooks définit la variable looks en fonction du premier élément du tableau myObj et renvoie après cela. Au lieu de cela, vous pouvez passer la valeur dont vous souhaitez déterminer l'apparence à la fonction en tant que paramètre, voici un exemple:

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>
0
Titus 27 janv. 2019 à 22:03

Tout d'abord, myObj est un tableau et vous utilisez une boucle for/in. Les boucles for/in ne doivent pas être utilisées avec les tableaux car ils itèrent toutes les propriétés de l'objet tableau, pas seulement les index. Pour simplement itérer un tableau, vous pouvez utiliser une boucle de comptage régulière, .forEach() ou for/of.

Vous effectuez également une boucle une deuxième fois et appelez la fonction un certain nombre de fois, lorsque vous pouvez simplement exécuter la fonction une fois et boucler sur le tableau une fois.

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>
0
Scott Marcus 28 janv. 2019 à 21:47