Can you add the Menu2.json and Menu.3.json to the search filter. i have done the

ID: 3737400 • Letter: C

Question

Can you add the Menu2.json and Menu.3.json to the search filter. i have done the first Menu.json file but i am unable to add the other 2 json files. So when i type in the search bar, the menus in the json files should turn up. And also could also make the Css is working.

Menu1.json
{
"House Daily Soup" :
{
    "Description":"House made – served with artisan bread and farm butter – mostly (V) please ask",
    "Price":"£4.95"
},
"ANDY HOLT’S SATURDAY BLACK PUDDING" :
{
    "Description":"Bacon jam and soft poached egg",
    "Price":"£5.75"
},
"SATURDAY GRAVLAX" :
{
    "Description":"Cured with beetroot and sea salt – caper & lemon dressing",
    "Price":"£7.95"
},
"TEMPURA KING PRAWNS" :
{
    "Description":"Toasted corn chilli puree",
    "Price":"£7.95"
},
"RARE BREED BABY BACK RIBS" :
{
    "Description":"Basted in black treacle – cola & chilli",
    "Price":"£6.50"
}
}
Menu2.json
{
"Lamb duo" :
{
    "Description":"Pan-fried lamb rump and a Cheddar topped shepherd’s pie with seasonal vegetables and a red wine jus" ,
    "Price":"£4.95"
},
"Steak and mushroom pie " :
{
    "Description":"Slow cooked beef with a red wine sauce, topped with puff pastry, served with mash, seasonal vegetables and a jug of gravy",
    "Price":"£5.75"
},
"Roasted vegetable tart" :
{
    "Description":"Kale and thyme pastry filled with butternut squash, plum tomatoes, red onion, spinach and red peppers, with a leek sauce",
    "Price":"£7.95"
},
"Chicken and thyme pie" :
{
    "Description":"In a creamy chenin blanc sauce, topped with puff pastry, served with spring onion mash and seasonal vegetables",
    "Price":"£7.95"
},
"Yorkshire ham and free range eggs" :
{
    "Description":"with triple-cooked chips",
    "Price":"£6.50"
}
}
Menu3.json
{
"Fish and chips" :
{
    "Description":"beer-battered, line-caught cod with triple-cooked chips, mushy peas and tartare sauce",
    "Price":"£4.95"
},
"Seared fillet of sea bass " :
{
    "Description":"with crushed baby potatoes, asparagus and a lobster and samphire sauce",
    "Price":"£5.75"
},
"Pizza:Meat Feast" :
{
    "Description":"Chicken, pork and fennel sausage, crispy bacon, mozzarella and a red onion chutney",
    "Price":"£7.95"
},
"Pizza- roasted vegetable" :
{
    "Description":"red pepper, butternut squash, red onion, spinach and mozzarella(V)",
    "Price":"£7.95"
},
"Spicy diablo" :
{
    "Description":"Pepperoni, chorizo, guindilla chill peppers, ozarella and a chipotle chilli jam",
    "Price":"£6.50"
}
}

menuButton.html

<!DOCTYPE html>

<html>

<head>

<title>JavaScript AJAX</title>

</head>

<body>

<h1>Welcome to the Fab Pub Company (Est 2017)</h1>

<p id="description">Welcome to the Fab Pub Company. Check out our great menus by clicking on the buttons. Have an awesome day!</p>

<h2>Have a look at our menus...</h2>

<form>

<p>Click the button to get menu. </p>

<br/>

</form>

</div>

<label for="search">Please search for a menu item</label>

</div>

<p>Visit our pubs and enjoy a convivial atmosphere, fine wines and food of a high quality as pictured in these royalty-free

graphics

</p>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

function getDay() {

// created array weekdays to store days names

var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

var date = new Date(); // getting todays date with Date() object in JavaScript

var today = weekdays[date.getDay()]; // finding day that belongs to the date

alert("Today is :" + today); // alert() displaying days name to end user

}

function loadAJAX(jsonData) // defination for loadAJAX()

{

var request = new XMLHttpRequest();

request.open('GET', jsonData);

request.onreadystatechange = function () {

if ((request.readyState === 4) && (request.status === 200)) {

var menus = JSON.parse(request.responseText);

var output = " ";

for (var key in menus) {

output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";

}

var update = document.getElementById('menu');

update.innerHTML = output;

}

request.send();

}

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/overlook.jpg", "_images/winery_sign.jpg", "_images/lunch.jpg",

"_images/bigSur.jpg", "_images/flag_photo.jpg", "_images/mission_look.jpg"];

var imageIndex = 0;

function changeImage() {

myImage.setAttribute("src", imageArray[imageIndex]);

imageIndex++;

if (imageIndex >= imageArray.length) {

imageIndex = 0;

}

var intervalHandle = setInterval(changeImage, 1000);

myImage.onclick = function () {

clearInterval(intervalHandle);

};

$('#search').keyup(function () {

var searchField = $('#search').val();

var myExp = new RegExp(searchField, "i");

$.getJSON('Menu.json', function (data) {

var output = '<ul class="searchresults">';

$.each(data, function (key, val) {

if ((key.search(myExp) != -1) ||

(val.Description.search(myExp) != -1)) {

output += '<li>';

output += '<h2>' + key + '</h2>';

output += '<img src="images/' + val.shortname + '_tn.jpg" alt="' + key + '" />';

output += '<p>' + val.Description + '</p>';

output += '</li>';

}

});

output += '</ul>';

$('#update').html(output);

}); //get JSON

});

</script>

</body>

</html>

Explanation / Answer

Plese give me comment, If you need anything/ doubts....

<!DOCTYPE html>

<html>

<head>

<title>JavaScript AJAX</title>

</head>

<body>

<h1>Welcome to the Fab Pub Company (Est 2017)</h1>

<p id="description">Welcome to the Fab Pub Company. Check out our great menus by clicking on the buttons. Have an awesome day!</p>

<h2>Have a look at our menus...</h2>

<form>

<p>Click the button to get menu. </p>

<br/>

</form>

</div>

<label for="search">Please search for a menu item</label>

</div>

<p>Visit our pubs and enjoy a convivial atmosphere, fine wines and food of a high quality as pictured in these royalty-free

graphics

</p>

</div>

function getDay() {

// created array weekdays to store days names

var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

var date = new Date(); // getting todays date with Date() object in JavaScript

var today = weekdays[date.getDay()]; // finding day that belongs to the date

alert("Today is :" + today); // alert() displaying days name to end user

}

function loadAJAX(jsonData) // defination for loadAJAX()

{

var request = new XMLHttpRequest();

request.open('GET', jsonData);

request.onreadystatechange = function () {

if ((request.readyState === 4) && (request.status === 200)) {

var menus = JSON.parse(request.responseText);

var output = " ";

for (var key in menus) {

output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";

}

var update = document.getElementById('menu');

update.innerHTML = output;

}

request.send();

}

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/overlook.jpg", "_images/winery_sign.jpg", "_images/lunch.jpg",

"_images/bigSur.jpg", "_images/flag_photo.jpg", "_images/mission_look.jpg"];

var imageIndex = 0;

function changeImage() {

myImage.setAttribute("src", imageArray[imageIndex]);

imageIndex++;

if (imageIndex >= imageArray.length) {

imageIndex = 0;

}

var intervalHandle = setInterval(changeImage, 1000);

myImage.onclick = function () {

clearInterval(intervalHandle);

};

$('#search').keyup(function () {

var searchField = $('#search').val();

var myExp = new RegExp(searchField, "i");

var myDataFiles = ["Menu1.json", "Menu2.json", "Menu3.json"];

$("#update").html("<ul class='searchresults'>");

$.each(myDataFiles, function (ind, file) {

$.getJSON(file, function (data) {

var output = '';

$.each(data, function (key, val) {

if ((key.search(myExp) != -1) ||

(val.Description.search(myExp) != -1)) {

output += '<li>';

output += '<h2>' + key + '</h2>';

output += '<img src="images/' + val.shortname + '_tn.jpg" alt="' + key + '" />';

output += '<p>' + val.Description + '</p>';

output += '</li>';

}

});

$('#update').append(output);

}); //get JSON

$('#update').append("</ul>");

});

</script>

</body>

</html>

Navigate

Can you add clear the data Button and Exit Button( to exit from the output dialo

Can you add the actions to the buttons public class TimeIn extends javax.swing.J

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

Can you add the Menu2.json and Menu.3.json to the search filter. i have done the

Question

Explanation / Answer

Related Questions

Navigate