RDeconomist.github.io/apiTester.html at main · RDeconomist/RDeconomist.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">

<head>

      <!-- START ANALYTICS -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <!-- This stuff provided by Google from the Admin page of Analysics account -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-JP82FVH378"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-JP82FVH378');
    </script>
    <!-- END ANALYTICS -->


    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--Link to main Stylesheet-->
    <link rel="stylesheet" href="css/apiTool.css">

    <title>API tester</title>

</head>


<!-- /////////////////////////////////////////////////////// -->
<body>


  <!-- heading for page-->
<div class="wrap">
  <h1>api<span style="color: #ff0000">tester</span></h1>
  <span style="display:block; height: 10px;"></span>
  <p id="rubric" class="rubric">A functioning API lies at the heart of automated data analysis, yet APIs can fail. Paste an API into the box below to test your API. A sucessful fetch will return green JSON data. If nothing happens your API needs debugging, see tips further down the page.</p>
  <span style="display:block; height: 10px;"></span>
</div>


<div class="inputs">
<input  id="url" type="url" class="urlBox"
        placeholder="Paste API url here"
        pattern="https://.*"></input>

<br>

<button class ="button" onclick="testURL()">Fetch Data</button>
</div>

<div class="box">
  <div class=boxTitle>Result:</div>
  <div class="result" id="result"></div>
</div>


<div class="wrap">
  <h4>Debugging CORS problems</h1>
  <span style="display:block; height: 5px;"></span>
  <p id="rubric" class="rubric">Try using the All Origins tool.</p>
  <p id="rubric" class="rubric">Add the following to the front of your existing url:</p>
  <p id="rubric" class="rubric"><strong>https://api.allorigins.win/raw?url=</strong></p>
  <p id="rubric" class="rubric">See the ONS <a href="https://www.dropbox.com/s/5n514arcy1muu8r/chart10_mendingONSAPIusingAllOrigins.json?dl=0">unemployment chart </a> in course DropBox for worked example.</p>
  <span style="display:block; height: 10px;"></span>
</div>


<!-- //////////////////////////////////////////////// -->

<script>
async function testURL() {

  //Grab the URL from the page:
  var url = document.querySelector('#url').value;
  console.log(url);

  //Now use Fetch to get the URL:
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);

  //Now turn the results into JSON:
  dataJSON = JSON.stringify(data);

  //Now display the JSON on the page:
  // document.body.innerHTML = dataJSON;
  var x = document.getElementById("result");
  x.innerHTML = dataJSON;

}

</script>


</body>


</html>