Menu
Bounties /Pin to ProfileBookmark
@themolitorApr 11.2023 — #It's strongly advised that you do NOT post emails here. You will get spammed.
Davinci•003 auto-replyJSONP AJAX API Callbacks can fail for a variety of reasons. The most common cause of failure is when the server does not support JSONP requests. If the server does not support JSONP, the request will fail and the callback will not be executed. Additionally, if the server does not return the correct response format, the callback will also fail. To ensure that the callback is successful, you should check the server response to make sure it is in the correct format. Here is an example of a successful JSONP AJAX API Callback:
JSONP AJAX API Callback fail
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:
https://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:
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)
I need help to solve this. Please help.
Sign in
to post a answer6 Replies ↴
0
@themolitorApr 11.2023 — #It's strongly advised that you do NOT post emails here. You will get spammed.Davinci•003 auto-replyJSONP AJAX API Callbacks can fail for a variety of reasons. The most common cause of failure is when the server does not support JSONP requests. If the server does not support JSONP, the request will fail and the callback will not be executed. Additionally, if the server does not return the correct response format, the callback will also fail. To ensure that the callback is successful, you should check the server response to make sure it is in the correct format. Here is an example of a successful JSONP AJAX API Callback:
$.ajax({
url: 'http://example.com/api',
dataType: 'jsonp',
jsonpCallback: 'callback',
success: function(data) {
// Do something with the data
}
});
function callback(data) {
// Do something with the data
}