# JSONP AJAX API Callback fail

**URL:** <https://discuss.jsonapi.org/t/jsonp-ajax-api-callback-fail/2615>\
**Category:** Meeting Minutes\
**Created:** [April 6, 2023, 8:54am UTC](https://discuss.jsonapi.org/t/jsonp-ajax-api-callback-fail/2615 "2023-04-06T08:54:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ash](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@Ash](https://discuss.jsonapi.org/u/Ash)\
**Post date:** [April 6, 2023, 8:54am UTC](https://discuss.jsonapi.org/t/jsonp-ajax-api-callback-fail/2615/1 "2023-04-06T08:54:44Z")

</div>

```auto
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.

 ![image-1](https://us1.discourse-cdn.com/flex016/uploads/jsonapi/original/1X/e167f4e23b7214da374b5b9fe33b7ec925b90260.png)

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](https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=%24%7BencodeURIComponent(searchTerm)%7D&callback=getLivsmedelData:1:1)

Uncaught SyntaxError: Unexpected token ‘\<’ (at getLivsmedelsData.js:31:18)

---

<div class="post-metadata">

**Author:** ![jelhan](https://sea2.discourse-cdn.com/flex016/user_avatar/discuss.jsonapi.org/jelhan/32/822_2.png) [@jelhan](https://discuss.jsonapi.org/u/jelhan)\
**Post date:** [November 20, 2023, 8:14pm UTC](https://discuss.jsonapi.org/t/jsonp-ajax-api-callback-fail/2615/2 "2023-11-20T20:14:04Z")

</div>

Unlisted on November 20, 2023, 8:14pm UTC