/    Sign up×
Bounties /Pin to ProfileBookmark

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:

https://webservice.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)

I need help to solve this. Please help.

to post a answer
HTMLJavaScript

6 Replies

Copy linkTweet thisAlerts:
@themolitorApr 11.2023 — It's strongly advised that you do NOT post emails here. You will get spammed.
Copy linkTweet thisAlerts:
@SempervivumApr 10.2023 — jsfiddle containing the complete code in the HTML tab:
https://jsfiddle.net/Sempervivum/8094cz7g/
@themolitorexample embedded iframe: Apr 10.2023
@themolitor
<iframe src="//jsfiddle.net/Sempervivum/8094cz7g/embedded/html/dark/" allowfullscreen="allowfullscreen" width="100%" height="300" frameborder="0"></iframe>
Apr 10.2023
@Ashley128authorI do not get it. I copy out the script part and put it in a separate file named what? The second part <I frame scr… What to do?Apr 10.2023
@Ashley128authorThank youApr 10.2023
@themolitorI'm just providing examples for @Sempervivum on how to embed an iframe so the code he's sharing with you displays here in the comments (so you don't have to go open a new window).Apr 11.2023
Copy linkTweet thisAlerts:
@Ashley128authorApr 10.2023 — So how is the look like
Copy linkTweet thisAlerts:
@Ashley128authorApr 10.2023 — If I want have a separate js file. I just copy it out and leave the html untouched. Am I right?
What will the js file named?
@SempervivumYes, but be aware that you have to drop the opening and closing script tag in the code you insert in to that file. Just choose an appropriate name of your choice.Apr 10.2023
@Ashley128authorWhere is the complete js file?Apr 10.2023
@themolitorHeads up, if @Sempervivum has alerts turned on only for his posted answer, he'll only be notified of your DIRECT reply to his answer thread (like this comment I'm posting to you here). In other words, posting a new "Answer" will not alert other users that have a posted answer.Apr 10.2023(updated)
@Ashley128authorCan you send me the whole files to [email protected]Apr 10.2023
Copy linkTweet thisAlerts:
@SempervivumApr 10.2023(updated) — There are two issues in your code: 1. Your function names do not match: At definition getLivsmedelsData, in URL: getLivsmedel 2. HTML in src attribute is not allowed. remove it After fixing both, your code is running fine: script.src = https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=${encodeURIComponent(searchTerm)}&callback=getLivsmedelsData\;
@Ashley128authorCan you plz send me the whole script? I am new in this area.Apr 10.2023
@SempervivumApr 10.2023(updated)
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
}

Was this helpful?

×

Success!

Help @Ashley128 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...