Extra 16-1 Develop a Contact List app that uses JSON In this exercise, you’ll de

ID: 3607542 • Letter: E

Question

Extra 16-1 Develop a Contact List app that uses JSON

In this exercise, you’ll develop a Contact List application that uses the JSON object to convert objects to strings and back again for storage in local storage. The application looks like this:

And this is the JSON string that’s stored in local storage:

[{"f":"Grace","l":"Hopper","o":"UNIVAC","p":"555-262-6500","e":""},

{"f":"Alan","l":"Turing","o":"","p":"","e":"alan@bletchleypark.uk"}]

Open the HTML and JavaScript files in this folder:

exercises_extrach16contact_list

Review the code in the contact_list.js file. Note that it uses a storage object and Contact objects to add and display contacts.

In the library_storage.js file, add code to the getContacts method that converts a string to a JavaScript object and returns it, or returns an empty array if the string is null.

Still in the library_storage.js file, add code to the setContacts method that converts a JavaScript object to a string.

In the library_contact.js file, review the code for the Contact constructor function and its methods. Then, add code to the toJSON method that shortens the property names (you can refer to the JSON string above to see what the short names should be).

Still in the library_contact.js file, add code to the loadJsonObject method that uses the object with short names to populate the Contact object’s properties.

Run and test the application. Notice that it allows you to store a phone number with dashes, slashes, plus signs, etc., but it displays the phone numbers exactly as you enter them.

index.html

<label for="first">First Name:</label><br>
<input type="text" name="first" id="first"><br>
<label for="last">Last Name:</label><br>
<input type="text" name="last" id="last"><br>
<label for="org">Organization:</label><br>
<input type="text" name="org" id="org"><br>
<label for="phone">Phone:</label><br>
<input type="text" name="phone" id="phone"><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>

contact_list.js

"use strict";
var $ = function (id) { return document.getElementById(id); };
var contacts = [];

var displayContacts = function () {
// clear previous
contacts.length = 0;
$("contacts").innerHTML = "";

// get contacts from storage and initialize a variable to hold html string
var array = storage.getContacts();
var html = "";

// loop array from storage, create new Contact objects, store
// them in contacts array and use the displayContact method for display
for (var i = 0; i < array.length; i++) {
var contact = new Contact();
contact.loadJsonObject(array[i]);
html = html.concat("<tr><td>", contact.displayContact(),"</td></tr>");
contacts[i] = contact;
}

// display html string and set focus on first textbox
$("contacts").innerHTML = html;
$("first").focus();
};

var addContact = function () {
// get values from textboxes
var first = $("first").value;
var last = $("last").value;
var org = $("org").value;
var phone = $("phone").value;
var email = $("email").value;

// use values to create a new Contact object
var contact = new Contact(first, last, org, phone, email);

// contact is valid,
if (contact.isValid()){
// add contact to array and reset local storage
contacts.push(contact);
storage.setContacts(contacts);

// clear text boxes and re-display contacts
clearTextBoxes();
displayContacts();
} else {
alert("Please enter a first and last name, and a phone number or email address.");
$("first").focus();
}
};

var clearTextBoxes = function() {
$("first").value = "";
$("last").value = "";
$("org").value = "";
$("phone").value = "";
$("email").value = "";
};

var eraseContacts = function() {
storage.clearContacts();
contacts.length = 0;
$("contacts").innerHTML = "";
$("first").focus();
};

window.onload = function() {
$("add_contact").onclick = addContact;
$("erase").onclick = eraseContacts;
displayContacts();
};

library_contact.js

"use strict";

var Contact = function(first, last, org, phone, email) {
if (arguments.length > 0) {
this.firstName = first;
this.lastName = last;
this.organization = org;
this.phone = phone;
this.email = email;
}
};

Contact.prototype.isValid = function() {
// must have first and last name, and either phone number or email address
var isValid = true;
if (this.firstName === "" || this.lastName === "") { isValid = false; }
if (this.phone === "" && this.email === "") { isValid = false; }
return isValid;
};

Contact.prototype.displayContact = function() {
return this.firstName.concat(" ", this.lastName, ", ",
this.organization, "<br>Phone: ", this.phone, " <br>Email: ",
this.email, "<hr>");
};

Contact.prototype.loadJsonObject = function(obj) {
// use json object from storage to populate properties

};

Contact.prototype.toJSON = function() {
// shorten property names for storage

};

library_storage.js

"use strict";

Explanation / Answer

library_storage.js

"use strict";

var storage = {

keyContacts: "contacts_1",

getContacts: function() {

// get string from local storage

var storageString = localStorage.getItem(this.keyContacts) || null;

if(storageString == "") {

return [];

}

else {

return JSON.parse(storageString);

}

setContacts: function(value) {

var storageString = JSON.stringify(value);

// store string in local storage

localStorage.setItem(this.keyContacts, storageString);

clearContacts: function() {

localStorage.setItem(this.keyContacts, "");

}

};

--------------------------------------------------------------------------------------------------------------------------------------

library_contact.js

"use strict";

var Contact = function(first, last, org, phone, email) {

if (arguments.length > 0) {

this.firstName = first;

this.lastName = last;

this.organization = org;

this.phone = phone;

this.email = email;

}

};

Contact.prototype.isValid = function() {

// must have first and last name, and either phone number or email address

var isValid = true;

if (this.firstName === "" || this.lastName === "") { isValid = false; }

if (this.phone === "" && this.email === "") { isValid = false; }

return isValid;

};

Contact.prototype.displayContact = function() {

return this.firstName.concat(" ", this.lastName, ", ",

this.organization, "<br>Phone: ", this.phone, " <br>Email: ",

this.email, "<hr>");

};

Contact.prototype.loadJsonObject = function(obj) {

var storageString = localStorage.getItem(obj) || null;

if(storageString !== "") {

var obj = JSON.parse(storageString);

this.firstName = obj.firstName;

this.lastName = obj.lastName;

this.organization = obj.organization;

this.phone = obj.phone;

this.email = obj.email;

}

};

Contact.prototype.toJSON = function() {

return JSON.stringify(this);

};

-------------------------------------------------------------------------------------------------------------------------------------------------

contact_list.js

use strict;
var $ = function (id) { return document.getElementById(id); };
var contacts = [];
var displayContacts = function () {
clear previous
contacts.length = 0;
$(contacts).innerHTML = ;

get contacts from storage and initialize a variable to hold html string
var array = storage.getContacts();
var html = ;

loop array from storage, create new Contact objects, store
them in contacts array and use the displayContact method for display
for (var i = 0; i array.length; i++) {
var contact = new Contact();
contact.loadJsonObject(array[i]);
html = html.concat(trtd, contact.displayContact(),tdtr);
contacts[i] = contact;
}
display html string and set focus on first textbox
$(contacts).innerHTML = html;
$(first).focus();
};
var addContact = function () {
get values from textboxes
var first = $(first).value;
var last = $(last).value;
var org = $(org).value;
var phone = $(phone).value;
var email = $(email).value;
use values to create a new Contact object
var contact = new Contact(first, last, org, phone, email);

contact is valid,
if (contact.isValid()){
add contact to array and reset local storage
contacts.push(contact);
storage.setContacts(contacts);
clear text boxes and re-display contacts
clearTextBoxes();
displayContacts();
} else {
alert(Please enter a first and last name, and a phone number or email address.);
$(first).focus();
}
};
var clearTextBoxes = function() {
$(first).value = ;
$(last).value = ;
$(org).value = ;
$(phone).value = ;
$(email).value = ;
};
var eraseContacts = function() {
storage.clearContacts();
contacts.length = 0;
$(contacts).innerHTML = ;
$(first).focus();
};
window.onload = function() {
$(add_contact).onclick = addContact;
$(erase).onclick = eraseContacts;
displayContacts();
};

-----------------------------------------------------------------------------------------------------------------------------------------------

index.html

<!DOCTYPE html>
<html>
<head>
<title>Contact List</title>
<link type="text/css" rel="stylesheet" href="contact_list.css">
<script type="text/javascript" src="library_storage.js"></script>
<script type="text/javascript" src="library_contact.js"></script>
<script type="text/javascript" src="contact_list.js"></script>
</head>
<body>
<main>
<h1>My Contacts</h1>
<table id="contacts"></table>
<label for="first">First Name:</label><br>
<input type="text" name="first" id="first"><br>
<label for="last">Last Name:</label><br>
<input type="text" name="last" id="last"><br>
<label for="org">Organization:</label><br>
<input type="text" name="org" id="org"><br>
<label for="phone">Phone:</label><br>
<input type="text" name="phone" id="phone"><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
<input type="button" name="add_contact" id="add_contact" value="Add Contact">
<input type="button" name="erase" id="erase" value="Erase Contacts">
<div class="clear"></div>
</main>
</body>
</html>

Navigate

Extra 15-1: Use namespaces and module pattern with the Clock Open the HTML and J

Extra 17.5.01 The density of mobile electrons in copper metal is 8.4 x 10m Suppo

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Extra 16-1 Develop a Contact List app that uses JSON In this exercise, you’ll de

Question

Explanation / Answer

Related Questions

Navigate