0

I am trying to learn more in JavaScript and I have this HTML that has a script embedded in it

<!DOCTYPE html>
<html>

<head>
  <title>Read data from External JSON file Using JavaScript</title>
</head>

<body>
  <h3>
    Data extracted from External JSON file using JavaScript.
  </h3>
  <div id='showData'></div>
</body>

<script>
  // Create XMLHttpRequest object.
  var oXHR = new XMLHttpRequest();

  // Initiate request.
  oXHR.onreadystatechange = reportStatus;
  oXHR.open("GET", "https://www.encodedna.com/library/sample.json", true); // get json file.
  oXHR.send();

  function reportStatus() {
    if (oXHR.readyState == 4) { // Check if request is complete.
      document.getElementById('showData').innerHTML = this.responseText;
    }
  }
</script>

</html>

I am using XAMPP and I have saved this in index.html I expected to get the JSON response in the innerHTML of the DIV which id is showData but I only got the h3 innerText

When I pressed F12 to see the console tab enter image description here

YasserKhalil
  • 9,138
  • 7
  • 36
  • 95
  • 3
    Press F12. Read the console error. You need to be allowed to access the data. It is not allowed from here due to CORS issues. It also helps to create the snippet with the HTML in the HTML pane and not in the JS pane – mplungjan May 12 '20 at 13:00
  • 1
    The answer is to use another resource or to get hold of a CORS proxy – mplungjan May 12 '20 at 13:05
  • Thanks a lot. I am beginner and I don't get what CORS proxy means. Can you give me more details? – YasserKhalil May 12 '20 at 13:05
  • Read some of the links the search I posted gives you. You need to have a server side process that reads the JSON for you and delivers it without the need for [Cross Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) – mplungjan May 12 '20 at 13:07
  • 1
    @YasserKhalil it can be resolved from server-side. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) – Majid Nayyeri May 12 '20 at 13:07
  • I am lost in all these links and can't get what's happening well. Is there a solution for this problem? – YasserKhalil May 12 '20 at 13:12
  • 1
    1. search for "fetch" which is what we use nowadays. 2. Find a free resource that will allow you to access it. 2. Profit – mplungjan May 12 '20 at 13:17
  • Can you guide me in detailed steps in an answer, please? I am very beginner and I need the detailed steps .. – YasserKhalil May 12 '20 at 13:18
  • 1
    Here is working code. It does take around 10 seconds to get a reply because the service is popular `document.getElementById('showData').innerHTML = "please wait..."; fetch('https://jsonplaceholder.typicode.com/todos/1') /* this is like your .send */ .then(response => response.json()) /* it returns some JSON we need to parse */ .then(json => document.getElementById('showData').innerHTML = json.title) /* here is the parsed JSON and we grab the title */` – mplungjan May 12 '20 at 13:23
  • I used the JSON placeholder: https://jsonplaceholder.typicode.com/ – mplungjan May 12 '20 at 13:24
  • Thanks a lot. Can you put it as an answer so as to be able to get it better – YasserKhalil May 12 '20 at 13:41
  • You used `mplungjan`. Is this the JSON response ..?All the contents of the JSON? – YasserKhalil May 12 '20 at 14:43

0 Answers0