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 ]}rewrite json with Fetch
原文地址：https://www.cnblogs.com/lizhidage/p/10162128.html