rewrite json with Fetch

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 ]}
复制代码源自博客：https://www.cnblogs.com/liuwei-0313/p/10060911.html
posted @ 2018-12-22 19:13  鬼木25  阅读(171)  评论(0)    收藏  举报