CODEWITHSUNDEEP
javascripthtmlarrays
gezer4000
gezer4000

Reputation: 101

Where would I place a search function in this javascript?

I think I'm really close with this, but I'm having trouble placing the search function in my existing code.

I want it so that if the word that's searched corrolates to a last_name then the function displays the entire related array. Without the search function, the code works fine as long as I specify the string in the JS. I.e.

return item.last_name == "Simpson";

will display
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},

This is great, but I need the user to type in a name and the appropriate array to display.

What I have so far:-

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<input type="search" id="mySearch" /> <button onclick="myFunction()">Try it</button>

<div id="return"></div>

<script>

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]

var simpson = users.find(callback);
function callback(item){
    var x = document.getElementById("mySeach").value;
    return item.last_name == x;
}
document.getElementById("return").innerHTML = (function myFunction(){
     return JSON.stringify(simpson);
})();

</script>
</body>
</html>

Am I calling the right function with onclick? I'm not even sure if .value is the right method for this job. When checking the API it seemed like the most relevant.

Let me know if more detail is needed.

JSfiddle

Upvotes: 0

Views: 93

Answers (3)

user3200167
user3200167

Reputation:

Could do something like this. I was having some issues with your fiddle since it myFunction isn't defined before. I modified as such:

<script>
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]


function myFunction() {
    var x = document.getElementById("mySearch").value;
    var simpson = users.filter(item => item.last_name == x);
    document.getElementById("return").innerHTML = JSON.stringify(simpson);
}
</script>

<input type="search" id="mySearch" /> <button onclick="myFunction()">Try it</button>

<div id="return"></div>

JSFiddle

Upvotes: 1

Nate Anderson
Nate Anderson

Reputation: 690

This solution does not allow for partial matches or for case insensitivity. Hope this helps :)

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}];


 function myFunction() {
  var searchValue = document.getElementById("mySearch").value;
   for(var i = 0; i < users.length; i++){
     if(users[i]['last_name'] === searchValue){
       document.getElementById("return").innerHTML = JSON.stringify(users[i]);
       return;
     }
   }
}
<input type="search" id="mySearch" /> <button onclick="myFunction()">Try it</button>

<div id="return"></div>

Upvotes: 2

Gabriel
Gabriel

Reputation: 2190

Well, you just have to define your myFunction. Basically create a function with what you already have so it executes when the button is clicked.

//this could be outside because is like the data base
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]

function myFunction() { //TODO rename it to something more descriptive
    var foundUser = users.find(callback);
    document.getElementById("return").innerHTML = JSON.stringify(foundUser );
}

//this goes outside because it's other function
function callback(item){
    var x = document.getElementById("mySeach").value;
    return item.last_name == x;
}

You could also invoke the funcition on the input event so it searchs as the user types.

Upvotes: 1

Related Questions