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>
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?
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 ; 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.
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 have tried them with the 