Pfthb

I'm trying to load the contents of a JSON file in a JS file and write it to my main HTML file, but am unsure how to approach it.

What I've done so far is as follows:

index.html:

<p>
 Name: <span id="dogName1"></span><br>
 Breed: <span id="dogBreed1"></span><br>
 Age: <span id="dogAge1"></span><br>
 Image: <span id="dogImage1"></span><br>
</p>

package.json:

{
 "name":"pets",
 "Dogs":[
 
 "Name":"Oliveander",
 "Breed":"German Shepherd",
 "Age":3,
 "Image":"images/GermanShepherd.jpg"
 ,
 
 "Name":"Ripley",
 "Breed":"Golden Retriever",
 "Age":5,
 "Image":"images/GoldenRetriever.jpg"
 ,
 
 "Name":"Remi",
 "Breed":"Siberian Husky",
 "Age":2,
 "Image":"images/SiberianHusky.jpg"
 
 ]

main.js:

$.getJSON( "data/package.json", function( json ) 
 console.log( "JSON Data received, name is " + json.name);
);

All I've been able to understand so far is that the code I have in my JS file is the method in which I load the JSON file, but I'm unsure how to proceed

I think what you're looking for is the jQuery append() method. You use it like this:

$(document).ready(function () 
 $.getJSON( "data/package.json", function( json ) 
 console.log( "JSON Data received, name is " + json.name);
 for(let i in json.Dogs)
 var dog = json.Dogs[i];
 $("#dogTable").append(getDogMarkup(dog));
 
 );
);

function getDogMarkup(dog)
 return 'Name: <span class="dogName">' + dog.Name + '</span><br>' +
 'Breed: <span class="dogBreed">' + dog.Breed + '</span><br>'+ 
 'Age: <span id="dogAge1">' + dog.Age + '</span><br>'+ 
 'Image: <span id="dogImage1">//image html here</span><br><br>';

What you'll need to do is make something of an anchor point in your HTML that you can fill with the data you want, like so: <div id="dogTable"></div>

you can simply iterate json data like below

var jsonData = 
 "name":"pets",
 "Dogs":[
 
 "Name":"Oliveander",
 "Breed":"German Shepherd",
 "Age":3,
 "Image":"images/GermanShepherd.jpg"
 ,
 
 "Name":"Ripley",
 "Breed":"Golden Retriever",
 "Age":5,
 "Image":"images/GoldenRetriever.jpg"
 ,
 
 "Name":"Remi",
 "Breed":"Siberian Husky",
 "Age":2,
 "Image":"images/SiberianHusky.jpg"
 
 ]
 
 for(var i=0;i<jsonData.Dogs.length;i++)
 console.log("Name : "+ jsonData.Dogs[i].Name)
 console.log("Age : "+ jsonData.Dogs[i].Age)
 console.log("Bread : "+ jsonData.Dogs[i].Bread)
 console.log("------------------------------------")
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>