JSONP and AJAX API search

Html file

<!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>


Js file

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:


If we are looking for “bacon” the website is


food data must take place from a web service available at this URL:


Can anyone help me? I pressed the button, nothing happens. I got a empty list with a table head.

Need help with codes. This is completely new for me.

Please help me.

It seems that the JavaScript code you provided is missing the getLivsmedel callback function, which is used to handle the JSONP response from the web service. You should add this function to your JavaScript file like this:

function getLivsmedel(data) {
  // Handle the data returned by the web service

Additionally, make sure that the getLivsmedel function is called with the correct parameter name when you make the JSONP request. You should change the following line:

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


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

This way, the getLivsmedelsData function will be called with the data returned by the web service.

I hope this helps!

I tried this

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

bur I have still error i webbrowser consoile windows:

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

I do not know what this means

The error message is telling you that there is a reference error in your code. Specifically, the function getLivsmedelData is not defined.

The code you provided is making a request to a web service with a callback function named getLivsmedelData. The purpose of this callback function is to handle the response from the web service.

To fix the error, you need to define the getLivsmedelData function before making the request. You can define the function like this:

function getLivsmedelData(data) {
  // Handle the data from the web service here

Make sure that this function is defined before the code you provided that makes the request. Then, when the web service responds, it will call the getLivsmedelData function with the data as an argument, and you can handle the data in that function.

Can you please help me to provide some codes for me? I am totally green in this area.

Hi , can you explain it . For which part you need code or are you asking for the complete source code.

The Complete code, so I can study for better knowledge

I have a long way to learn so I really need start help plz.

The code you are requesting is outside the scope of our offerings.