JSON/JSONP problems with JavaScript

Question

I'm new to JSON/JSONP and i ran into some problems and have some questions about it. Basically there are some JSON data i need to get from:

https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getLivsmedel

You're supposed to search for some food (like bacon) and then you get some information about it, which presents in a table like this: https://jsfiddle.net/4gt10u2p/1/

So i start off with creating a script element and then append it to body like this:

var script = document.createElement('script');
var scriptSrc = script.src = *link above*

document.querySelector('body').appendChild(script);
var tableBody = document.querySelector("tbody");

Followed by a function where i gather the array data and format my table with rows, cells etc.

function getLivsmedel(data) {
      for (var i = 0; i < data.livsmedel.length; i++) {  
      /* some stuff going on here */
}

This does nothing, all you get is an empty array. For it to work i have to add a parameter to the link, like for bacon you add "&namn=bacon" at the end. So if i change the src to this instead: https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getlivsmedel&namn=bacon Then everything is fine and all the bacon information lines up in my table like i want it.

But i obviously want this to be a dynamic solution, so that the parameter change to whatever the user writes in search field. How do i make that work? I have tried to take the value of the search field and add it to the link, but can't really get it to work.

Also, another problem is that the function is getting executed right away when the page loads, why is that? I want it to run when you press the search button, with an eventlistener or similar.

Doing this with javaScript, without jquery etc.

Answer 1

The first thing we need is a submit handler for when you press the button:

function submit() {
    var searchbox = $("input#searchbox").val();
    var script = document.createElement('script');
    script.src = "https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getlivsmedel&namn=" + searchbox 
    document.querySelector('body').appendChild(script);
}

So now every time you press submit, a new JSONP object will be loaded for the search terms. From here you need to make the callback function work properly like for example, whenever a new type of food is searched, the old JSONP object and the data is removed and replaced with the new.

Here is an old SO question about JSONP with a full example for a solution

Answer 2

You very nearly have it. Simply encapsulate your <script>-adding code in a function, and call it when you click the Search button:

function doJSONP() {
    var script = document.createElement('script');
    var scriptSrc = script.src = 'https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getLivsmedel&namn=' + search.value;

    document.querySelector('body').appendChild(script);
}

button.addEventListener("click", function() { doJSONP(); });

This assumes that search is your input element (not the load-time value of that element, as you currently have in your fiddle), and button is your button element.

Just a few notes on your fiddle:

• You'll need to do window.getLivsmedel = function(data) { instead of function getLivsmedel(data) { in JSFiddle, because the fiddle's Script code does not run in a global scope. JSONP requires functions are visible from the global scope. (This is not a problem outside of JSFiddle on a normal web page.)
• Your getLivsmedel function doesn't seem to work: there doesn't appear to be tbody in your HTML. However, this is a totally different problem (and probably easily fixed) and not related to your JSONP troubles.

Here's your fiddle with my changes implemented: https://jsfiddle.net/4gt10u2p/2/