Read JSON Data from URL (JavaScript)
Question
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 answers
solution1
0 2018-08-15 21:24:55
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript read JSON from url
Read data from JSON Url using plain javascript and display it in HTML
How to read json from url in javascript?
How to read JSON data from url
read data json from a specific url
How to read data from URL using JavaScript?
Read data from BLOB URL in Javascript
How to read JSON data from a remote URL to a file in the local file store using JavaScript?
Read JSON data from javascript and trim string
how to read JSON data from the api with javascript
Related Tags