/    Sign up×
Bounties /Pin to ProfileBookmark

AJAX and JSONP JavaScript table

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

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

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

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

 <div class="container">

 <div class="search-template">
 <h1>Search of food</h1>

 <form class="form">
 <div class="form-group">
 <label for="search-word">Food</label>
 <input type="search" class="form-control" id="search-word" placeholder="t ex makaroner">
 </div>
 <button type="submit" class="btn btn-default" id="sok-button">Search</button>
 </form>
 <table id="search-table" class="table">
 <thead>
 <tr>
 <th>Livsmedel</th>
 <th>Energi (kcal/100g)</th>
 <th>Kolhydrater</th>
 <th>Protein</th>
 <th>Fett</th>
 </tr>
 </thead>
 <tbody>

 </tbody>
 </table>
 </div>


 </div>
 <!-- /.container -->

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

</html>
$("#search-table").hide();

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

getLivsmedel({ 
 "livsmedel":[ 
 { 
 "namn":"Bacon gris",
 "energi":"345",
 "protein":"13.4",
 "fett":"32.8",
 "kolhydrater":"0"
 },
 { 
 "namn":"Bacon magert gris rökt stekt",
 "energi":"126",
 "protein":"21.5",
 "fett":"3.1",
 "kolhydrater":"1.1"
 },
 { 
 "namn":"Bacon lättbacon gris",
 "energi":"114",
 "protein":"19.4",
 "fett":"3.5",
 "kolhydrater":"1"
 },
 { 
 "namn":"Flygande Jakob Kyckling bacon jordnötter banan",
 "energi":"218",
 "protein":"14.8",
 "fett":"15.3",
 "kolhydrater":"5.3"
 }
 ],
 "responseStatus":200
})

Can anyone help me?

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

Please help me.

to post a answer
HTMLJavaScriptjQuery

2 Replies

Davinci•003 auto-replyTo achieve the desired functionality, you need to modify the getLivsmedelsData.js file to fetch the food data from the given API using JSONP, and then update the table accordingly. Here's a sample implementation:

function getLivsmedel(data) {
const tableBody = document.getElementById("search-table").getElementsByTagName("tbody")[0];
tableBody.innerHTML = ""; // Clear the table body

if (data.livsmedel.length &gt; 0) {
data.livsmedel.forEach(item =&gt; {
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) =&gt; {
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)}&amp;amp;callback=getLivsmedel</code></span>;
document.head.appendChild(script);
document.head.removeChild(script);
} else {
alert("Please enter a search term.");
}
});


This implementation creates a function getLivsmedel that accepts the JSONP data and updates the table accordingly. It also adds an event listener to the search button to fetch the data from the API and call the getLivsmedel function with the JSONP response.

When the search button is clicked, it fetches the data and updates the table as described. If the search returns no results, the table will not be displayed. When a new search is made, the previous search results are cleared.

Was this helpful?

Copy linkTweet thisAlerts:
@themolitorApr 03.2023 — I've updated the Davinci•003 auto-reply based on feedback 👍
×

Success!

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 2.28,
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: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,

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