Read JSON Data from URL (JavaScript)

Attempt 2 to get my question right (please bear with me - I'm new).

I am trying to read data from a URL

http://test.fhir.org/r3/Patient?family=smith&given=peggy&_format=json

and want to use Javascript to reformat it to the screen as table but

(1) I can't get it to read and

(2) I can't format it to a table as in json2table.com

Can anyone help? Here is the code I am trying.

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Playing with JSON</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

      <style type="text/css">
        .row{ margin-top: 20px}
      </style>

      <script type="text/javascript">
        $(window).load(function(){

        console.log('loading event handlers');
        var $response = document.getElementById("response");
        var $getReposBtn = document.getElementById("get-repos");
        $getReposBtn.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.timeout = 2000;
            xhr.onreadystatechange = function(e){
                console.log(this);
                if (xhr.readyState === 4){
                    if (xhr.status === 200){
                        // debugger;
                        // console.log(xhr.response);
                        $response.innerHTML = xhr.response;
                    } else {
                        console.error("XHR didn't work: ", xhr.status);
                    }
                }
            }
            xhr.ontimeout = function (){
                console.error("request timedout: ", xhr);
            }
            xhr.open("get", "http://test.fhir.org/r3/Patient?family=smith&given=peggy&_format=json", /*async*/ true);
            xhr.send();
        }
        });
    </script>

    </head>
    <body>
      <div class="container">
          <div class="row">In Development</div>
        <div class="row">
            <button id="get-repos">JSON download trial!!</button>
        </div>
        <div class="row">
            <pre id="response"></pre>
        </div>
    </div>

      <script>
        if (window.parent && window.parent.parent){
          window.parent.parent.postMessage(["resultsFrame", {
            height: document.body.getBoundingClientRect().height,
            slug: "9f7sb409"
          }], "*")
        }
      </script>
    </body>
    </html>

1 answer

  • answered 2018-08-15 21:24 Erick Ruiz de Chavez

    In this example you are assuming jQuery is present by having bootstrap.js loaded. This is not the case and you either need to load jQuery before bootstrap OR move your script to the bottom of the page (right before the body is closed) and remove this $(window).load(function(){}).

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Playing with JSON</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style type="text/css">
        .row {
          margin-top: 20px
        }
    
      </style>
    </head>
    
    <body>
      <div class="container">
        <div class="row">In Development</div>
        <div class="row">
          <button id="get-repos">JSON download trial!!</button>
        </div>
        <div class="row">
          <pre id="response"></pre>
        </div>
      </div>
    
      <script>
        if (window.parent && window.parent.parent) {
          window.parent.parent.postMessage(["resultsFrame", {
            height: document.body.getBoundingClientRect().height,
            slug: "9f7sb409"
          }], "*")
        }
      </script>
    
      <script>
        console.log('loading event handlers');
        var $response = document.getElementById("response");
        var $getReposBtn = document.getElementById("get-repos");
        $getReposBtn.onclick = function () {
          var xhr = new XMLHttpRequest();
          xhr.timeout = 2000;
          xhr.onreadystatechange = function (e) {
            console.log(this);
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                // debugger;
                // console.log(xhr.response);
                $response.innerHTML = xhr.response;
              } else {
                console.error("XHR didn't work: ", xhr.status);
              }
            }
          }
          xhr.ontimeout = function () {
            console.error("request timedout: ", xhr);
          }
          xhr.open("get", "http://test.fhir.org/r3/Patient?family=smith&given=peggy&_format=json", /*async*/ true);
          xhr.send();
        }
    
      </script>
    </body>
    
    </html>
    

    If you decide to use jQuery, your code can be simplified a lot:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Playing with JSON</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style type="text/css">
        .row {
          margin-top: 20px
        }
    
      </style>
    </head>
    
    <body>
      <div class="container">
        <div class="row">In Development</div>
        <div class="row">
          <button id="get-repos">JSON download trial!!</button>
        </div>
        <div class="row">
          <pre id="response"></pre>
        </div>
      </div>
    
      <script>
        if (window.parent && window.parent.parent) {
          window.parent.parent.postMessage(["resultsFrame", {
            height: document.body.getBoundingClientRect().height,
            slug: "9f7sb409"
          }], "*")
        }
      </script>
    
      <script>
        $(function () {
          console.log('loading event handlers');
    
          $("#get-repos").click(function onClick() {
            var url = "http://test.fhir.orgs/r3/Patient?family=smith&given=peggy&_format=json";
    
            $.getJSON(url, function onSuccess(response) {
              $("#response").text(JSON.stringify(response));
            });
          });
        });
      </script>
    </body>
    
    </html>