How to fix a Javascript error

Asked

Viewed 351 times

0

I’m using the javascript library P5.js, and I’m trying to access files local, in the current case I am trying to load a json file through the function loadJSON(url) provided by the library. However I am having some errors in this attempt. I have checked the json file formatting and it is correct.
Obs: In the browser Mozila Firefox is working correctly, but in Google Chrome and Opera are generating the same errors arranged in the image:

var jsonn1;
function preload(){
  jsonn1 = loadJSON("json1.json");
}

function setup() {
  testeJSON();
}

function draw() {
}

function testeJSON(){
  document.getElementById('teste').innerHTML = jsonn1[0].titulo;
  document.getElementById('teste').setAttribute('href', jsonn1[1].link);
}
<!DOCTYPE html>

<html>
  <head>
    <title>json test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-viewport, initial-scale=1" />

    <!--CDN Files-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

    <!--Local Files-->
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <script type="text/javascript" src="json1.json"></script>

  </head>

  <body>

    <div id="teste" href="">
    </div>

  </body>

</html>

inserir a descrição da imagem aqui

  • 1

    CORS does not work with protocol file, already tried to execute your code with a server http?

  • I haven’t tried, but if it works on an http server, I can be sure it will work properly when I host my page ?

  • I don’t know yet, I’m gonna run some tests to see if that’s it

  • I tested only without your code, seems to be a problem with the library

  • I tested on a local server here and it worked correctly, but I still have the doubt, will it work after I host my page? I don’t know much about back-end

  • It depends on how you set it up, but I think it’s still going to go wrong, from what I saw, the order of the Imports is wrong

  • What would be the right order?

  • 1

    First <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script> afterward <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script>

Show 3 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.