Launch the function loadJSON() with a html button

Hello,
I would like to launch a loadJSON() function with an html input element.
below is my code, it should work but I have this error : NetworkError when attempting to fetch resource
how to resolve it ?

<!DOCTYPE html>
<head>
	<meta charset=utf-8>
	<meta name=viewport content=width=device-width,initial-scale=1>
	<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
	<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js>	</script>

<script type="text/javascript">
		function setup(){
			noCanvas(), noLoop();				
		}

		function myfunction(){
			var url = 'https://api.archives-ouvertes.fr/search/?q=title_t:(javascript)&wt=json';
			loadJSON(url, treatData);
		}
		
		function treatData(jsonData){
			var data = jsonData.response.numFound;
			print(data);
		}
	</script>
</head>
<body>
	<form> 
		<input type="submit" value="Submit" onclick="myfunction()">
	</form>
</body>

With an html button, I manage to launch a function with some text (cf this post), but I dont manage to launch a function with loadJSON() :confused:

maybe the problem is related to this callback function of loadJSON() :question:

What is the exact text of your error? Can you call myfunction from something other than an onclick callback? Can you visit the URL directly?

The exact error is TypeError: “NetworkError when attempting to fetch resource.”

I dont want to visit the URL directly – like with function preload() – because my goal is after to add an input Html element where the user can add some text, which is then used to build the URL…

In the upper example, URL is api.archives-ouvertes.fr/search/?q=title_t:(javascript)&wt=json'
and my goal is that the javascript string could be replaced by some text typed from the user.

Can you call myfunction from something other than an onclick callback?

I have to search and test.

Yeah, I know this isn’t your end goal. But when you encounter an error, often you’ll have to troubleshoot and isolate the error. If I was getting a network error, I’d try to visit the URL directly. If I can do that, then I know the URL is okay and the error is elsewhere. If I’m unable to visit the URL directly, then I’d know that maybe the URL was incorrect or the server was down or something.

I see…
the URL, and my code, works :slight_smile: ; I have tried them with the preload function :

	        var jsonData;

		function preload(){
			var url = 'https://api.archives-ouvertes.fr/search/?q=title_t:(javascript)&wt=json';
			jsonData = loadJSON(url);
		}

		function setup(){
			noCanvas(), noLoop();				
		}

		function draw(){
			var data = jsonData.response.numFound;
			var feedback ; 
			if(data != 0) feedback = 'the URL works';
			else feedback = 'the URL did not work';
			createP(feedback);
		}
		

maybe the problem is in the articulation of functions. In the reference examples, the URL can be load in the preload function, or in the setup function, but is it possible to loadJSON() in a draw function ?

Doing this is a bad idea as draw() is executed at least 30 times per second. You could attach it to an event associated to an element in your DOM. For example, when a mouse is clicked or a key is typed in a field. Is that what you mean?

In your first code, I vbelieve those fields in the header need to be placed within quotation marks. If you check your console output, you should get some errors indicating you need to fix those fields. Did you see those messages?

Regarding your url, as Kevin mentioned, it is important that you get a response when you load that request directly. I wasn’t able to get it to work. I didn’t know if it was because the request wa ill-formulated or there was an error in the service. But it seems you got it to work, so that is good for the time being. It is important to have a runnable example here in the forum to be able to reproduce the problems and solve questions efficiently.

Kf

Oh, no, no errors. I took thoses lines from @GoToLoop Code 800A0404 issue

yes, I verify my URLs before posting. below is the result.


I really didn’t know you getting nothing, sorry for that… I understand know Kevin’s answer…

I see… do you have an example ?
so launching a P5JS function with <input onclick=''\> HTML is not recommanded/usual ?

You can do that but it is preferable to do it in setup(). The idea is not to call that line in draw() as you would be doing it many times per second.

Kf

this code launch the function with an event associated to a DOM element

        var button;

        function setup(){
            noCanvas(), noLoop();

            button = createButton('run function');
            button.position(15,10);
            button.mouseClicked(myFunction);       
        }

        function myFunction(){
            var url = 'https://api.archives-ouvertes.fr/search/?q=title_t:(javascript)&wt=json';
            loadJSON(url, treatData);
        }
       
        function treatData(jsonData){
            var data = jsonData.response.numFound;
            print(data);
        }

I was referring to your question. The code above seems fine. Is everything working now?

Kf

yes, thanks,
I have now to retrieve the data from an input element.