Code not working, help

Code not working, help
0.0 0

#1

So im trying to make Profile Lookup work on a webpage, but its not showing up in my paragraph what i want, it doesnt work. Any help would be appreciated.

HTML:

<html>
<body>
  <input type="text" id="myId" value="input"><br>
  <input type="text" id="newId" value="property"><br>
  <button type="submit" onclick="myFunction()">Click</button>
  <p id="demo"></p>
</body>
</html>

JavaScript:

var contacts = [
  {
  "firstName": "Jake",
  "lastName": "Johnny",
  "number": "033456",
  "likes": ["Pizza", "Coding", "Gaming"]
},

{
  "firstName": "Joe",
  "lastName": "Ronald",
  "number": "033555",
  "likes": ["Pizza", "Coding", "Gaming"]
}, 

{
  "firstName": "Geg",
  "lastName": "Ron",
  "number": "033444",
  "likes": ["Pizza", "Coding", "Gaming"]
}
];


function myFunction() {
  var name = document.getElementById("myId").value;
  var property = document.getElementById("newId").value;
  var text;
  
  for (var i = 0; i < contacts.length; i++) {
    if (contacts[i].firstName === name) {
      if (contacts[i].hasOwnProperty(property)) {
        text = contacts[i][prop];
      } else {
        text = "No such a property";
      }
    }
  }
  text = "No such a name";
}
document.getElementById("demo").innerHTML = text;

#2

Hello there!

One posible cause of the problem may be that you fill the “demo” element with the content of text outside the function; This way “text” it’s not defined because you create it inside the function, and because of it, it is a local variable of myFunction and can’t be accesed from the outside of the function. You must use the line document.getElementById("demo").innerHTML = text; inside the function.

    if (contacts[i].firstName === name) {
      if (contacts[i].hasOwnProperty(property)) {
        text = contacts[i][prop];
      } else {
        text = "No such a property";
      }
    }
  }
  text = "No such a name";
document.getElementById("demo").innerHTML = text;
}

Regardless of it, the element “demo” will always be filled with “No such name” because no matter what happens, at the end of the function always text = “no such name”


#3

Ok thanks but how do i make it to show me name and propert if i type in existing name and property?


#4

This is a posible solution:

      console.log("Entro a la function");
      var name = document.getElementById("myId").value;
      var property = document.getElementById("newId").value;
      var text;

      for (var i = 0; i < contacts.length; i++) {
        if(contacts[i].firstName === name){
          if(contacts[i].hasOwnProperty(property)){
            // If name AND property matches, then put name and property in the p element:
            text = name + "<br>" + property + ": " + contacts[i][property];
            document.getElementById("demo").innerHTML = text;
            return; // the return forces the program to exit the function, so there is no further search...
          }
        }
      }
      // If the for loop ends means that, or the name doesn't exist, or well that name hasn't the property required...
      text = "No such a name or property";
      document.getElementById("demo").innerHTML = text;
    }

If you want to differenciate if the problem is with the name or with the property the code has to change more. One possible solution:

function myFunction() {
      var name = document.getElementById("myId").value;
      var property = document.getElementById("newId").value;
      var text;
      var name_exists = false;
      var name_index;

      for (var i = 0; i < contacts.length; i++) {
        if(contacts[i].firstName === name){
          // Name matches, name_exists becomes true:
          name_exists = true;
          name_index = i;
        }
      }
      if(name_exists) // ---> the same as if(name_exists == true)
      {
        if(contacts[name_index].hasOwnProperty(property)){
          // property matches, then put name and property in the p element:
          text = name + "<br>" + property + ": " + contacts[name_index][property];
          document.getElementById("demo").innerHTML = text;
          return; // the return forces the program to exit the function, so there is no further search...
        }
        else { // the name hasn't the property required:
          text = "No such property";
          document.getElementById("demo").innerHTML = text;
        }
      }
      else{ // if name_exists == false, then:
        text = "No such name";
        document.getElementById("demo").innerHTML = text;
      }
    }