function getLivsmedelsData(data) {
const tableBody = document.getElementById("search-table").getElementsByTagName("tbody")[0];
tableBody.innerHTML = ""; // Clear the table body
if (data.livsmedel.length> 0) {
data.livsmedel.forEach(item => {
const row = tableBody.insertRow();
const nameCell = row.insertCell();
const energyCell = row.insertCell();
const carbsCell = row.insertCell();
const proteinCell = row.insertCell();
const fatCell = row.insertCell();
nameCell.textContent = item.namn;
energyCell.textContent = item.energi;
carbsCell.textContent = item.kolhydrater;
proteinCell.textContent = item.protein;
fatCell.textContent = item.fett;
});
} else {
document.getElementById("search-table").style.display = "none";
}
}
document.getElementById("sok-button").addEventListener("click", (e) => {
e.preventDefault();
const searchTerm = document.getElementById("search-word").value.trim();
if (searchTerm) {
const script = document.createElement("script");
script.src = <span><code>https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=${encodeURIComponent(searchTerm)}&callback=getLivsmedel</code></span>;
document.head.appendChild(script);
document.head.removeChild(script);
} else {
alert("Please enter a search term.");
}
});
- When the user clicks on the “Search button”, a search made against a food web service.
- The search result should be presented as rows in the table found in index.html . Use the tbody element inside the table.
- The result must consist of food names, energy and the distribution of carbohydrates, protein and fat. Be sure to check that the correct order.
- When a new search is made, the result from the previous search must be removed.
- If the search results in zero hits, the table should not be displayed.
- If the search results in one or more hits, the table must be visible and show the result.Se picture.
Food data must take place from a web service available at this URL:
webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php
If we want to search for all foods that contain the text “bacon” in their name. We can then design our URL as follows:
hwebservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=bacon&callback=getLivsmedel
I got these kind of fail message from web browser console
Uncaught ReferenceError: getLivsmedelData is not defined
at https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=${encodeURIComponent(searchTerm)}&callback=getLivsmedelData:1:1
Uncaught SyntaxError: Unexpected token ‘<’ (at getLivsmedelsData.js:31:18)