HTML
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <meta name="viewport" content="width=device-width">
7
8 <title>Fetch json example</title>
9 <style type="text/css">
10 html {
11 font-family: sans-serif;
12 }
13
14 ul {
15 list-style-type: none;
16 display: flex;
17 flex-flow: column;
18 align-items: flex-start;
19 }
20
21 li {
22 margin-bottom: 10px;
23 background-color: pink;
24 font-size: 150%;
25 border-top: 3px solid pink;
26 border-bottom: 3px solid pink;
27 box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
28 }
29
30 strong {
31 background-color: purple;
32 color: white;
33 padding: 0 8px;
34 border-top: 3px solid purple;
35 border-bottom: 3px solid purple;
36 text-shadow: 2px 2px 1px black;
37 }
38 </style>
39 <!--[if lt IE 9]>
40 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
41 <![endif]-->
42 </head>
43
44 <body>
45 <h1>Fetch json example</h1>
46 <ul>
47 </ul>
48
49 </body>
50 <script>
51 var myList = document.querySelector('ul');
52 fetch('https://raw.githubusercontent.com/KylinBio-healthTechnology/lw/master/x.json')
53 .then(function(response) {
54 if (!response.ok) {
55 throw new Error("HTTP error, status = " + response.status);
56 }
57 return response.json();
58 })
59 .then(function(json) {
60 for(var i = 0; i < json.products.length; i++) {
61 var listItem = document.createElement('li');
62 listItem.innerHTML = '<strong>' + json.products[i].Name + '</strong>';
63 listItem.innerHTML +=' can be found in ' + json.products[i].Location + '.';
64 listItem.innerHTML +=' Cost: <strong>£' + json.products[i].Price + '</strong>';
65 myList.appendChild(listItem);
66 }
67 })
68 .catch(function(error) {
69 var p = document.createElement('p');
70 p.appendChild(
71 document.createTextNode('Error: ' + error.message)
72 );
73 document.body.insertBefore(p, myList);
74 });
75 </script>
76 </html>
json文件如下：https://raw.githubusercontent.com/KylinBio-healthTechnology/lw/master/x.json
1 { "products" : [
2 { "Name": "Cheese", "Price" : 2.50, "Location": "Refrigerated foods"},
3 { "Name": "Crisps", "Price" : 3, "Location": "the Snack isle"},
4 { "Name": "Pizza", "Price" : 4, "Location": "Refrigerated foods"},
5 { "Name": "Chocolate", "Price" : 1.50, "Location": "the Snack isle"},
6 { "Name": "Self-raising flour", "Price" : 1.50, "Location": "Home baking"},
7 { "Name": "Ground almonds", "Price" : 3, "Location": "Home baking"}
8 ]}