Attempt to retrieve JSON-formatted data from a repository on Git

Question

Attempt to retrieve JSON-formatted data from a repository on Git

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?

javascript json ajax github https

Answer 1

Answer №1

To get the desired result, you must call the send() function and then patiently wait for it to load:

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);

    renderHTML(myData);
  });
  
  myRequest.send();
});

function renderHTML(data) {
  var LenJson = data.length;
  var Num = Math.floor(Math.random() * LenJson);
  
  var QuoteString = "<p id='quote-text'>" + data[Num].quoteText + "</p>";
  var AuthorString = "<p id='quote-author'>" + data[Num].quoteAuthor + "</p>";
  
  quoteContainer.insertAdjacentHTML('beforeend', QuoteString);
  quoteContainer.insertAdjacentHTML('beforeend', AuthorString);
}

<button id="btn" type="button">Generate Random Quote</button>
<div id="random-quote"></div>

Answer 2

To get the desired result, you must call the send() function and then patiently wait for it to load:

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);

    renderHTML(myData);
  });
  
  myRequest.send();
});

function renderHTML(data) {
  var LenJson = data.length;
  var Num = Math.floor(Math.random() * LenJson);
  
  var QuoteString = "<p id='quote-text'>" + data[Num].quoteText + "</p>";
  var AuthorString = "<p id='quote-author'>" + data[Num].quoteAuthor + "</p>";
  
  quoteContainer.insertAdjacentHTML('beforeend', QuoteString);
  quoteContainer.insertAdjacentHTML('beforeend', AuthorString);
}

<button id="btn" type="button">Generate Random Quote</button>
<div id="random-quote"></div>

Answer 3

Answer №2

Don't forget to add the myRequest.send() line right after executing the open() method.

For further details, visit: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Answer 4

Don't forget to add the myRequest.send() line right after executing the open() method.

For further details, visit: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Attempt to retrieve JSON-formatted data from a repository on Git

Answer №1

Answer №2

Similar questions

Is it possible to iterate through a JSON array for comparisons using Python?

"Unexpected Results: Using the .each method in jQuery to print a JSON object displays more outcomes

Modifying an onClick handler function within a react element located in a node module, which points to a function in a prop declared in the main Component file

Discovering a specific JSON object member by its corresponding string value

Double clicking on a row value in a Bootstrap table

The null error occurs when rendering with React's state array

Issue with jQuery's .height() method not updating

jQuery is not defined when importing reactjs, bootstrap, and npm modules

Streaming large files with Node.js can lead to significant memory consumption and potential memory errors like OOM

In Lua, we can print the heart symbol ( ♡ ) after successfully parsing a JSON data

My element is not being animated by Elementbyclass

Compiling Directives in AngularJS for Faster Page Loading

The 'mergeMap' property is not found on the 'Observable<any>' type

Primefaces: Leveraging RequestContext for One-time Ajax Updates

Anticipating the completion of multiple observable subscription functions

Angular2 - HTML not displaying the response

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

Unable to send email through Ajax/PHP contact form

Could using 'require' in node.js lead to a memory leak issue?