Try to extract a json formatted data from a git repository

Question

I am a beginner, trying to learn ajax and working with json files. I would like to use of JSON formatted data. But the result of my request is an empty text. Update: Here is my piece of code:

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

It still doesn't return any data. Why?

Are you by any chance attempting to run this off a local file using `file://`...? — Patrick Roberts, Jun 14 '17 at 19:24
@PatrickRoberts I am using `brackets` as text editor and it runs the code in the `chrome` browser. Well, as I said I just started learning `javascript` and I might do something wrong. — Dalek, Jun 14 '17 at 19:28
Possible duplicate of [File Url Cross Domain Issue in Chrome- Unexpected](https://stackoverflow.com/questions/6060786/file-url-cross-domain-issue-in-chrome-unexpected) — Patrick Roberts, Jun 14 '17 at 19:30
@PatrickRoberts well I tried the answer but it doesn't solve my issue! — Dalek, Jun 15 '17 at 09:54

score 1 · Answer 1 · answered Jun 14 '17 at 18:53

1

You forgot to include myRequest.send(), which you should have on the line after you run the open() method.

More information: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

answered Jun 14 '17 at 18:53

Ben Schroeder

346
2
7

Patrick Roberts · Accepted Answer · 2017-06-15T12:05:01.910

You need to send() it and 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>

Thanks for the answer. I already had `myRequest.send();` in my original code but still I don't get any output. I posted my whole code. — Dalek, Jun 14 '17 at 19:09
@Dalek I updated the full code. You had some missing variable names and you forgot to integerize your random number. When you debug, please _please_ check your console for errors from now on, it tells you exactly what's wrong with your code. The whole time I had been assuming you wrote it properly. — Patrick Roberts, Jun 15 '17 at 12:06

Try to extract a json formatted data from a git repository

2 Answers2