Question
In: Computer Science
Given this HTML form <div class="mymargin"> <h2>iTunes Popular Music by Genre</h2> <table> <tr> <td width="100px"> </td> <td>...
Given this HTML form
<div class="mymargin">
<h2>iTunes Popular Music by Genre</h2>
<table>
<tr>
<td width="100px"> </td>
<td>
<form >
<span><b>Filter by Genre:</b></span> <br />
<select name="genre" id="genre">
<option value="">Select Genre</option>
<option value="Alternative Rock">Alternative Rock</option>
<option value="Country">Country</option>
<option value="Hip Hop/Rap">Hip-hop/Rap</option>
<option value="pop">Pop</option>
<option value="R&B/Soul">R&B/Soul</option>
</select>
<input type="button" id="mymusic" name="mymusic" value="Filter Songs">
</form>
</td>
</tr>
</table>
<table id="top25"></table>
</div>
and a JSON array
var arrJson = {"iTunes Top Song":[
{"Song": "Mood (feat. iann dior)",
"Artist": "24kGoldn",
"Genre": "Hip Hop/Rap",
"Release Date": "July 24, 2020",
"Image": "24kGoldn.png"},
{"Song": "One of Them Girls",
"Artist": "Lee Brice",
"Genre": "Country",
"Release Date": "April 10, 2020",
"Image": "lee_brice.png"},
{"Song": "Commander In Chief",
"Artist": "Demi Lovato",
"Genre": "Pop",
"Release Date": "October 14, 2020",
"Image": "demi_lovato.png"},
{"Song": "Bang!",
"Artist": "AJR",
"Genre": "Alternative Rock",
"Release Date": "February 12, 2020",
"Image": "ajr.png"},
{"Song": "Blinding Lights",
"Artist": "The Weeknd",
"Genre": "R&B/Soul",
"Release Date": "November 29, 2019",
"Image": "weeknd.png"},
{"Song": "Never Break",
"Artist": "John Legend",
"Genre": "R&B/Soul",
"Release Date": "June 19, 2020",
"Image": "john_legend.png"},
{"Song": "Before You Go",
"Artist": "Lewis Capaldi",
"Genre": "Alternative Rock",
"Release Date": "November 1, 2019",
"Image": "lewis_capaldi.png"},
{"Song": "Dynamite",
"Artist": "BTS",
"Genre": "Pop",
"Release Date": "August 21, 2020",
"Image": "dynamite.png"},
{"Song": "Better Together",
"Artist": "Luke Combs",
"Genre": "Country",
"Release Date": "November 8, 2019",
"Image": "luke_combs.png"},
{"Song": "Got What I Got",
"Artist": "Jason Aldean",
"Genre": "Country",
"Release Date": "October 11, 2019",
"Image": "jason_aldean.png"},
{"Song": "Circles",
"Artist": "Post Malone",
"Genre": "Hip Hop/Rap",
"Release Date": "August 31, 2019",
"Image": "post_malone.png"},
{"Song": "WAP (feat. Megan Thee Stallion)",
"Artist": "Cardi B",
"Genre": "Hip Hop/Rap",
"Release Date": "August 7, 2020",
"Image": "cardi_b.png"},
{"Song": "Holy (feat. Chance the Rapper)",
"Artist": "Justin Bieber",
"Genre": "Pop",
"Release Date": "September 18, 2020",
"Image": "justin_bieber.png"},
{"Song":"Someone You Loved",
"Artist": "Lewis Capaldi",
"Genre": "Alternative Rock",
"Release Date": "November 8, 2018",
"Image": "breach.png"},
{"Song": "Lovely Day",
"Artist": "Bill Withers",
"Genre": "R&B/Soul",
"Release Date": "January 1, 1977",
"Image": "bill_withers.png"},
{"Song": "Free Your Mind",
"Artist": "En Vogue",
"Genre": "R&B/Soul",
"Release Date": "March 24, 1992",
"Image": "en_vogue.png"},
{"Song": "Come & Go",
"Artist": "Juice WRLD & Marshmello",
"Genre": "Hip Hop/Rap",
"Release Date": "July 9, 2020",
"Image": "juice_etal.png"},
{"Song": "More Than My Hometown",
"Artist": "Morgan Wallen",
"Genre": "Country",
"Release Date": "April 17, 2020",
"Image": "morgan_wallen.png"},
{"Song": "Be Like That",
"Artist": "Kane Brown, Swae Lee, Khalid",
"Genre": "Pop",
"Release Date": "July 10, 2020",
"Image": "kane_etal.png"},
{"Song": "Dance Monkey",
"Artist": "Tones And I",
"Genre": "Alternative Rock",
"Release Date": "May 10, 2019",
"Image": "tones.png"},
{"Song": "Go Crazy",
"Artist": "Chris Brown & Young Thug",
"Genre": "R&B/Soul",
"Release Date": "May 5, 2020",
"Image": "chris_young.png"},
{"Song": "ROCKSTAR (feat. Roddy Ricch)",
"Artist": "DaBaby",
"Genre": "Hip Hop/Rap",
"Release Date": "April 17, 2020",
"Image": "dababy.png"},
{"Song": "I Hope (feat. Charlie Puth)",
"Artist": "Gabby Barrett",
"Genre": "Country",
"Release Date": "May 1, 2020",
"Image": "gabby_barrett.png"},
{"Song": "Baby, I'm Jealous (feat. Doja Cat)",
"Artist": "Bebe Rexha",
"Genre": "Pop",
"Release Date": "October 8, 2020",
"Image": "bebe_rexha.png"},
{"Song": "my ex's best friend",
"Artist": "Machine Gun Kelly & blackbear",
"Genre": "Alternative Rock",
"Release Date": "August 7, 2020",
"Image": "machine_etal.png"}
]}
Please help me write a Javascript function to filter and display them by genres
Solutions
Expert Solution
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="mymargin">
<h2>iTunes Popular Music by Genre</h2>
<table>
<tr>
<td width="100px"> </td>
<td>
<form >
<span><b>Filter by Genre:</b></span> <br />
<select name="genre" id="genre">
<option value="">Select Genre</option>
<option value="Alternative Rock">Alternative Rock</option>
<option value="Country">Country</option>
<option value="Hip Hop/Rap">Hip-hop/Rap</option>
<option value="pop">Pop</option>
<option value="R&B/Soul">R&B/Soul</option>
</select>
<input onclick="myFunction()" type="button" id="mymusic" name="mymusic" value="Filter Songs">
</form>
</td>
</tr>
</table>
<table border="1" id="top25"></table>
</div>
<script>
function myFunction() {
var genre = document.getElementById("genre").value;
var arrJson = {"iTunes Top Song":[
{"Song": "Mood (feat. iann dior)",
"Artist": "24kGoldn",
"Genre": "Hip Hop/Rap",
"Release Date": "July 24, 2020",
"Image": "24kGoldn.png"},
{"Song": "One of Them Girls",
"Artist": "Lee Brice",
"Genre": "Country",
"Release Date": "April 10, 2020",
"Image": "lee_brice.png"},
{"Song": "Commander In Chief",
"Artist": "Demi Lovato",
"Genre": "Pop",
"Release Date": "October 14, 2020",
"Image": "demi_lovato.png"},
{"Song": "Bang!",
"Artist": "AJR",
"Genre": "Alternative Rock",
"Release Date": "February 12, 2020",
"Image": "ajr.png"},
{"Song": "Blinding Lights",
"Artist": "The Weeknd",
"Genre": "R&B/Soul",
"Release Date": "November 29, 2019",
"Image": "weeknd.png"},
{"Song": "Never Break",
"Artist": "John Legend",
"Genre": "R&B/Soul",
"Release Date": "June 19, 2020",
"Image": "john_legend.png"},
{"Song": "Before You Go",
"Artist": "Lewis Capaldi",
"Genre": "Alternative Rock",
"Release Date": "November 1, 2019",
"Image": "lewis_capaldi.png"},
{"Song": "Dynamite",
"Artist": "BTS",
"Genre": "Pop",
"Release Date": "August 21, 2020",
"Image": "dynamite.png"},
{"Song": "Better Together",
"Artist": "Luke Combs",
"Genre": "Country",
"Release Date": "November 8, 2019",
"Image": "luke_combs.png"},
{"Song": "Got What I Got",
"Artist": "Jason Aldean",
"Genre": "Country",
"Release Date": "October 11, 2019",
"Image": "jason_aldean.png"},
{"Song": "Circles",
"Artist": "Post Malone",
"Genre": "Hip Hop/Rap",
"Release Date": "August 31, 2019",
"Image": "post_malone.png"},
{"Song": "WAP (feat. Megan Thee Stallion)",
"Artist": "Cardi B",
"Genre": "Hip Hop/Rap",
"Release Date": "August 7, 2020",
"Image": "cardi_b.png"},
{"Song": "Holy (feat. Chance the Rapper)",
"Artist": "Justin Bieber",
"Genre": "Pop",
"Release Date": "September 18, 2020",
"Image": "justin_bieber.png"},
{"Song":"Someone You Loved",
"Artist": "Lewis Capaldi",
"Genre": "Alternative Rock",
"Release Date": "November 8, 2018",
"Image": "breach.png"},
{"Song": "Lovely Day",
"Artist": "Bill Withers",
"Genre": "R&B/Soul",
"Release Date": "January 1, 1977",
"Image": "bill_withers.png"},
{"Song": "Free Your Mind",
"Artist": "En Vogue",
"Genre": "R&B/Soul",
"Release Date": "March 24, 1992",
"Image": "en_vogue.png"},
{"Song": "Come & Go",
"Artist": "Juice WRLD & Marshmello",
"Genre": "Hip Hop/Rap",
"Release Date": "July 9, 2020",
"Image": "juice_etal.png"},
{"Song": "More Than My Hometown",
"Artist": "Morgan Wallen",
"Genre": "Country",
"Release Date": "April 17, 2020",
"Image": "morgan_wallen.png"},
{"Song": "Be Like That",
"Artist": "Kane Brown, Swae Lee, Khalid",
"Genre": "Pop",
"Release Date": "July 10, 2020",
"Image": "kane_etal.png"},
{"Song": "Dance Monkey",
"Artist": "Tones And I",
"Genre": "Alternative Rock",
"Release Date": "May 10, 2019",
"Image": "tones.png"},
{"Song": "Go Crazy",
"Artist": "Chris Brown & Young Thug",
"Genre": "R&B/Soul",
"Release Date": "May 5, 2020",
"Image": "chris_young.png"},
{"Song": "ROCKSTAR (feat. Roddy Ricch)",
"Artist": "DaBaby",
"Genre": "Hip Hop/Rap",
"Release Date": "April 17, 2020",
"Image": "dababy.png"},
{"Song": "I Hope (feat. Charlie Puth)",
"Artist": "Gabby Barrett",
"Genre": "Country",
"Release Date": "May 1, 2020",
"Image": "gabby_barrett.png"},
{"Song": "Baby, I'm Jealous (feat. Doja Cat)",
"Artist": "Bebe Rexha",
"Genre": "Pop",
"Release Date": "October 8, 2020",
"Image": "bebe_rexha.png"},
{"Song": "my ex's best friend",
"Artist": "Machine Gun Kelly & blackbear",
"Genre": "Alternative Rock",
"Release Date": "August 7, 2020",
"Image": "machine_etal.png"}
]}
var arraYData = arrJson["iTunes Top Song"]
var tbody = document.getElementById('top25');
const rows = arraYData.filter(obj=>obj.Genre===genre)
$(document).ready(function () {
var html = "<table border='1|1'>";
html+="<tr>";
html+="<th>Song</td>";
html+="<th>Artist</td>";
html+="<th>Genre</td>";
html+="<th>Release Date</td>";
html+="<th>Image</td>";
html+="</tr>";
for (var i = 0; i < rows.length; i++) {
html+="<tr>";
html+="<td>"+rows[i].Song+"</td>";
html+="<td>"+rows[i].Artist+"</td>";
html+="<td>"+rows[i].Genre+"</td>";
html+="<td>"+rows[i]["Release Date"]+"</td>";
html+="<td>"+rows[i].Image+"</td>";
html+="</tr>";
}
html+="</table>";
tbody.innerHTML = html;
});
}
</script>
</body>
</html>
deserve thumbs up :)
venereology answered 1 year agoRelated Solutions
1) Identify the class​ width for the given Frequency Distribution Table List -------------Frequency 10 to 14...
- Rotating bits in C This rotates bits to the left which means the bits that were...
- Implement a method that meets the following requirements: (a) Takes as parameter 1) an int array...
- Write a function that takes a binary search tree as input and produces a linked list...
- XYZ Company is considering purchasing a piece of equipment costing $400,000. It has a useful life...
- Reflection of the short film "How Wolves Change Rivers" and Aldo Leopold's "Thinking Like A Mountain".
- What kind of rebar would be most cost effective for foundation? Would it be to design...
- Why would UnderArmour want to be sure that consumers can clearly see different models ( about...