JSON/JSONP problems with JavaScript

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.

Solution

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/