Trying to practice JSON

JavaScript
1

Hello,

I am moving very slowly through JSON trying to understand it. I found a test dataset (https://learnwebcode.github.io/json-example/animals-1.json). For now, all I want to do is pull the dataset from a URL and display it on my web page.

I see that the code is creating the <p> tags I want with the text in it. But can someone explain why the text/data is not showing up on the webpage? (This has less to do with JSON than just javascript).

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AJAX and JSON</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="AJAX.js"> </script>
  </head>
  <body>
    <p id="p1">replace this text</p>
  </body>
</html>

JS:

$.getJSON("https://learnwebcode.github.io/json-example/animals-1.json", function(data){
  // console.log(data);
  // $("p").innerHTML = data;
for (i=0; i<data.length; i++){
  var para = document.createElement("p");
  var node = document.createTextNode(data[i].name);
  para.appendChild(node);
  console.log(para);
  // document.getElementById("p1").innerHTML = data[i].name;
}
});

Many thanks!