As a novice, I am delving into the world of ajax and experimenting with json files. Utilizing JSON formatted data is something I am keen on mastering. However, my request seems to be yielding an empty outcome. An Update: Below is the piece of code I am working with:
var quoteContainer=document.getElementById("random-quote");
var btn=document.getElementById("btn");
btn.addEventListener("click",function(){
var myRequest=new XMLHttpRequest();
myRequest.open("GET","https://raw.githubusercontent.com/4skinSkywalker/Database-Quotes-JSON/master/quotes.json",true);
myRequest.addEventListener('load', function () {
var myData=JSON.parse(myRequest.responseText);
console.log(myRequest.responseText);
renderHTML(myData);
});
myRequest.send();
});
function renderHTML(data){
var LenJson=data.length;
var Num=Math.random()*LenJson;
console.log(Num);
var QuoteString="<p id='quote-text'>"+data[i].quoteText+"</p>"
var AuthorString="<p id='quote-author'>"+data[i].quoteAuthor+"</p>"
quoteContainer.insertAdjacentHTML('beforeend',QuoteString);
quoteContainer.insertAdjacentHTML('beforeend',AuthorString);
}
The issue persists as no data is getting returned. Why might this be?