Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jan Reefs
Jan Reefs
11,161 Points
Posted by Jan Reefs
Jan Reefs
11,161 Points

Help needed for the creation of a searchable database

Hi all,

I am trying to build a searchable database.

Task: Build a simple address book application using HTML, CSS, JavaScript and jQuery. It is a single page, that opens in the browser, where the user can create new contacts delete contacts, and use a search bar to find existing contacts. Each contact should have a name, surname, phone number, and address

I wrote the below js code already but am struggling on how to store all users in a contact database that is searchable. Can someone please help me with this?

var database = {}

$('.newContact').on('click', function(event) {
event.preventDefault();
console.log('You clicked me');

var user = {};
user.firstName = $('.firstName').val();
user.surname = $('.surname').val();
user.phoneNumber = $('.phoneNumber').val();
user.address = $('.address').val();

console.log(user);

<!doctype html>
<html lang="en">  

<head>
  <title>Codeworks</title>
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <header>
      <h1>Start of coding assignment</h1>
  </header>

  <main>

    <div class="introduction">
      <h2> What is the assignment? </h2> 
      <div class="introtext">Build a simple address book application using HTML, CSS, JavaScript and jQuery. It is a single page, that opens in the browser, where the user can create new contacts delete  contacts, and use a search bar to find existing contacts. Each contact should have a name, surname, phone number, and address.<br>
      </div>
    </div>

    <div class="introduction">
          <h2> Create a new contact </h2> 
          <div class="introtext">Please fill in the name, surname, phone number and address in each grid below.<br> </div>
    </div>

    <div>
      <form action='' method='get'>
       Name:
      <input class="firstName" type="text" name="firstName" id="firstName"> <br>

       Surname:
      <input class="surname" type="text" name="surname" id="surname"> <br>

      Phone Number:
      <input class="phoneNumber" type="text" name="phoneNumber" id="phoneNumber"> <br>

      Address:
      <input class="address" type="text" name="address" id="address"> <br>

      <button class='newContact' type="submit">Create new contact now!</button> 
      </div>
      </form>
    </div>


<div class="introduction">
          <h2> Deleting a contact </h2> 
          <div class="introtext">Please fill in the name and surname of the person you would like to remove.<br>
          </div>
    </div>

    <div>
      <form action='' method='get'>
      <label for="First name"> Name: </label>
      <input type="text" name="firstName" id="firstName"> <br>

      <label for="Surname"> Surname: </label>
                        <input type="text" name="surname" id="surname"> <br>

      <button class='deleteContact' type="submit">Remove contact now!</button>



 <div class="introduction">
          <h2> Searching a contact </h2> 
          <div class="introtext">Please fill in the name and surname of the person you would like to search.<br>
          </div>
    </div>

    <div>
      <form action='' method='get'>
      <label for="Search"> Name: </label>
      <input type="text" name="firstName" id="firstName"> <br>

      <label for="Surname"> Surname: </label>
      <input type="text" name="surname" id="surname"> <br>

      <button class='searchContact' type="submit">Search contact now!</button>

                        <script src="jquery-3.4.1.min.js"></script>
      <script src='script.js'> </script>



      <div id='result'\>TEXT</div>  

  </main>

</body>

<footer>   
  <h1>End of Coding assignment</h1>
</footer>

</html>

10 Answers

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

A simple database might be implemented as an array of user objects. The "push" method could then be used to add a new user object to it.

Searching could be done using the "find" or "findIndex" methods. For example:

define findUser(firstName, surName) {
    return database.find(u => u.firstName == firstName && u.surName == surName);
}

Also, some coding hints:

  • the "footer" is currently after the body, but all page code should be inside the body.
  • script code for libraries (like jQuery) can be included in the hea" area
  • function scripts should be the very last thing inside the body.
  • the JavaScript code is missing a closing brace, closing parenthesis, and a semicolon
Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

The new code works fine. But now that everything (including "database") is encapsulated by the ready callback, it won't be in the global space any more if you were looking for it there.

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

After seeing the snapshot, it looks like my guess was right. The code that stores new users is working.

But since "database" is encapsulated in the first ready callback, it cannot be accessed by methods in the global scope (like "findUser") or those in a separate ready callback (like the click handler for "deleteContact").

You can resolve this by putting everything into one ready callback, or you could eliminate the ready handling completely since your script is included at the end of the page and only establishes other handlers anyway.

By the way, "best practice" would be to include the scripts as the very last thing in the "body" section of the document.

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

You can't just display a "user" object as text, but you can convert the attributes to text in a number of ways. Here's an example using template literals:

  if (userFound) {
    $("#result").text(`Found: ${userFound.firstName} ${userFound.surname}`);
  } else {
    $("#result").text(`Could not find: ${findUserFirstName} ${findUserSurname}!`);
  }

You can eliminate ready handling just by deleting the lines that create the "ready" call and the callback function, leaving the lines inside to be part of the global space:

$(document).ready(function() {  // <-- remove this line
  // leave the code in here as it is
});                             // <-- and this one
Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

Thank you! Why is this not working?

$(document).ready(function() {

console.log('test')

var database = [];

$('.newContact').on('click', function(event) { event.preventDefault(); console.log('You clicked me');

var user = {}; user.firstName = $('.firstName').val(); user.surname = $('.surname').val(); user.phoneNumber = $('.phoneNumber').val(); user.address = $('.address').val();

console.log(user);

database.push(user);

});

});

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

ok but can you please just tell me what exactly I need to do because I simply can't find it like this. Thank you

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

You haven't shown the code that needs to find it. Are you building in a workspace? If so you can make a snapshot of your workspace and post the link to it here.

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

$(document).ready(function() {

console.log('test')

var database = [];

$('.newContact').on('click', function(event) { event.preventDefault(); console.log('You clicked me');

var user = {}; user.firstName = $('.firstName').val(); user.surname = $('.surname').val(); user.phoneNumber = $('.phoneNumber').val(); user.address = $('.address').val();

console.log(user);

database.push(user);

});

});

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

This appears to be the same code you posted 8 hours ago, and I already tested it and it does work.

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

it is the same code indeed but it doesn't store multiple users right if I click multiple times?

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

https://w.trhou.se/e2dgpkyskk

I don't manage to solve it...

Could you please have a look at the snapshot and write out in full how I can solve this problem. A user needs to be able to add people to the contact database (which I managed to do), to delete a person from the workspace and find someone in the contact database.

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

Yes it is resolved!

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

Ok I marked it. Could you please help me with my question? Thanks

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

Thanks a lot! I updated my html and css and am making progress I believe.

My latest version: https://w.trhou.se/yttkvhfnpc

A few questions: 1) how do I make sure the output of the find seach appears on my page? 2) 'You can resolve this by putting everything into one ready callback, or you could eliminate the ready handling completely since your script is included at the end of the page and only establishes other handlers anyway.' How can I eliminate the ready handling? should I use .on instead? 3) Could you please help me with finding the errors in my find and delete code?

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

I added another comment to my answer.

Jan Reefs
Jan Reefs
11,161 Points
Jan Reefs
Jan Reefs
11,161 Points

Thanks a lot - really appreciate the support!

Last version saved here: https://w.trhou.se/gk4y886uiq

The problem now is that it only shows the firstname and surname that was typed in and not the entire object (does not include address and phone number). How can I modify my code to retrieve the entire object when only searching for firstname and surname?

I removed the ".ready", but still can't remove a person from the database.

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

The code already retrieves the entire object (as "userFound"). My example just shows the names, but you can also show or do anything you might want with the other attributes.

This post is getting pretty bulky, but the original question here was about storing and searching the data. If you have issues with other parts of the code, mark this question complete and create a new question.

Steven Parker
Steven Parker
231,169 Points
Steven Parker
Steven Parker
231,169 Points

Jan Reefs — was this question ever resolved?