/    Sign up×
Bounties /Pin to ProfileBookmark

JSONP and AJAX API still fails

+ 1,000
Copy linkTweet thisAlerts:
Apr 05.2023
<!DOCTYPE html>
<html lang="en">

 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Uppgift 3</title>

 <!-- Bootstrap -->
 <link rel="stylesheet" href="styles/bootstrap.min.css">
 <link rel="stylesheet" href="styles/style.css" />

 <nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a class="navbar-brand" href="#">Uppgift 3</a>

 <div class="container">

 <div class="search-template">
 <h1>Sökning av livsmedel</h1>

 <form class="form">
 <div class="form-group">
 <label for="search-word">Livsmedel</label>
 <input type="search" class="form-control" id="search-word" placeholder="t ex makaroner">
 <button type="submit" class="btn btn-default" id="sok-button">Sök</button>
 <table id="search-table" class="table">
 <th>Energi (kcal/100g)</th>


 <!-- /.container -->

 <script src="scripts/jquery-3.3.1.min.js"></script>
 <script src="scripts/bootstrap.min.js"></script>
 <script src="scripts/getLivsmedelsData.js"></script>

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) => {
 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>;
 } else {
 alert("Please enter a search term.");

When the user clicks on the “Search button”, a search must be made against a food web service using so-called JSONP.

The search result should be presented as rows in the table found in index.html . Use the tbody element inside the table to hold your rows.

The result must consist of food names, energy and the distribution of carbohydrates, protein and fat, be ware of the orders.

  • When a new search is made, the result from the previous search must be deleted.
  • If the search results in zero hits, the table should not be displayed. In other words, the table header should not appear alone on the page.
  • If the search results in one or more hits, the table must be visible and show the result. The following image shows what a result might look like: 

food data must take place from a web service available at this URL: https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php

If we are looking for “bacon” the website is: https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=bacon&callback=getLivsmedel

I tried this And I get this faiölure (Webbrowser console windows)

script.src = <span><code>https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=${encodeURIComponent(searchTerm)}&amp;amp;callback=getLivsmedelsData</code></span>;

getLivsmedelsData.js:31 Uncaught SyntaxError: Unexpected token ‘<‘ (at getLivsmedelsData.js:31:16)

I tried this And I get this faiölure (Webbrowser console windows)

script.src = `https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=${encodeURIComponent(searchTerm)}&callback=getLivsmedelData`;

Uncaught ReferenceError: getLivsmedelData is not defined at https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?namn=${encodeURIComponent(searchTerm)}&callback=getLivsmedelData:1:1 (anonymous) @ getlivsmedel.php? namn=${encodeURIComponent(searchTerm)}&callback=getLivsmedelData:1

to post a answer

2 Replies

Davinci•003 auto-replyJSONP and AJAX API requests can fail for a variety of reasons. Common causes of failure include incorrect API endpoints, incorrect parameters, or incorrect authentication credentials. Additionally, if the server is not configured to accept cross-origin requests, the request will fail. To debug the issue, you can use the browser's developer tools to inspect the request and response. If the request is successful, you should see a response with the expected data. If the request fails, you should see an error message that can help you identify the cause of the failure.

// Example AJAX request
url: 'https://example.com/api/endpoint',
type: 'GET',
dataType: 'json',
success: function(data) {
// Handle successful response
error: function(xhr, status, error) {
// Handle failed response

Was this helpful?

Copy linkTweet thisAlerts:
@lizauthorApr 05.2023 — I am stuck


Help @liz 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 12.9,
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: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,