Normally in a web application, we would store our data in a database. We don\'t
ID: 3605712 • Letter: N
Question
Normally in a web application, we would store our data in a database. We don't have a database in this class, but we can fake it. So let's do so.
1. Begin by creating a file called store.js and store it in the js folder. Create an empty array in your store.js file to represent our database. Make sure you declare it globally so it can be accessed in all the functions. This is normally a bad thing but we will forgive ourselves this one time.
2. Create several album objects with the following properties.
id
title
artist
price
release date
Quantity
Tracklisting (should be an array)
3. Once you've created your fake albums, add them to the array representing the database.
Part B:
1. Create a file called search.js.
2. Create an event listener in the search.js script that is handled by a function called search that handles the onclick event for the submit button for the search.
3. When I type an artist name (I'm only going to search by artist name right now), in the
search box and hit submit, your search function should loop through the fake database of albums in the store.js file. You can handle this many cools ways. I would suggest creating a store object and adding functions to it. The global array would then be visible to the other scripts on the page. As you iterate through the database array check for the ones that match the artist that was entered in the search box. Open a new page and display the results in a list on that page. You will need to use dom manipulation for this part.
Explanation / Answer
For this code to work first declare store.js and then search.js file in your html file. so do it as below :
<script type="text/javascript" src="store.js"></script>
<script type="text/javascript" src="search.js"></script>
store.js file:
var dbArray = [];
var albums = function(id, title, artist, price, releasedate, quantity, tracklisting) {
this.id = id;
this.title = title;
this.artist = artist;
this.price = price;
this.releasedate = releasedate;
this.quantity = quantity;
this.tracklisting = tracklisting;
}
var track1 = ["1"];
var track2 = ["2"];
var track3 = ["3"];
var track4 = ["4"];
dbArray.push(new albums("id1", "title1", "artist1", "price1", "releasedate1", "quantity1", track1));
dbArray.push(new albums("id2", "title2", "artist2", "price2", "releasedate2", "quantity2", track2));
dbArray.push(new albums("id3", "title3", "artist3", "price3", "releasedate3", "quantity3", track3));
dbArray.push(new albums("id4", "title4", "artist4", "price4", "releasedate4", "quantity4", track4));
search.js file :
//here i considered submit as id of submit button then event handler function is as below:
document.getElementById("submit").addEventListener("click", search);
function search() {
var artist = document.getElementById("search").value;
var filtered = [];
for (var i=0; i<dbArray.length; i++) {
var album = dbArray[i];
if (artist.toUpperCase() == album.artist.toUpperCase()) {
filtered.push(album);
}
}
}
newwindow = window.open(); // this will open new tab with no page content now we need to populate list.
doc = newwindow.document;
doc.open(); //open outputstream for the document to write filtered artist data.
doc.write("<html><body><table>");
for (var j=0; j<filtered.length; j++) {
var a = filtered[j];
doc.write("<tr><td>a.id</td><td>a.title</td><td>a.artist</td><td>a.price</td><td>a.releasedate</td><td>a.tracklisting</td></tr>");
}
doc.write("</table></body></html>");
doc.close();
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.