如何将数据从外部 JSON 保存到 HTML？答案

【问题标题】：How can I save data from external JSON to HTML?如何将数据从外部 JSON 保存到 HTML？
【发布时间】：2017-03-25 12:33:54
【问题描述】：

如何将数据从外部 JSON 保存到 HTML？

我有一个网站http://api.nbp.pl/api/exchangerates/rates/A/USD?format=json，我只需要从此查询中保存rates.mid，并将其乘以 html 文件中的 PLN 值。有人能帮帮我吗？

丹尼尔。

【问题讨论】：

你有 jQuery 吗？
当然。 jQuery 3.1.1.

标签： javascript html json api

【解决方案1】：

由于我不知道你有没有 jQuery，所以我以 xhr 为例：https://mathiasbynens.be/notes/xhr-responsetype-json

我们基本上添加了函数getJSON，它允许我们加载JSON文件。

使用data.rates[0].mid，我们可以访问mid 值（rates 是一个数组）。

var getJSON = function(url, successHandler, errorHandler) {
	var xhr = typeof XMLHttpRequest != 'undefined'
		? new XMLHttpRequest()
		: new ActiveXObject('Microsoft.XMLHTTP');
	xhr.open('get', url, true);
	xhr.onreadystatechange = function() {
		var status;
		var data;
		// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
		if (xhr.readyState == 4) { // `DONE`
			status = xhr.status;
			if (status == 200) {
				data = JSON.parse(xhr.responseText);
				successHandler && successHandler(data);
			} else {
				errorHandler && errorHandler(status);
			}
		}
	};
	xhr.send();
};

getJSON('https://api.nbp.pl/api/exchangerates/rates/A/USD?format=json', function(data) {
	alert(data.rates[0].mid);
}, function(status) {
	alert('Something went wrong.');
});

使用 jQuery，这将起作用：

$.getJSON('https://api.nbp.pl/api/exchangerates/rates/A/USD?format=json',
function(data){
    alert(data.rates[0].mid);
},function(error){
    console.log(error);
});

【讨论】：

我添加了 jQuery 示例 ;)
我将代码修改为this 之类的东西，它正在工作！再次感谢你:)
既然你有 jQuery，你也可以使用 jQuery 选择器：codepen.io/anon/pen/QpBNLq

【解决方案2】：

<html>
<head>
<script type="text/javascript" > </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('people.json', function(data) {
       $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
           "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

people.json

{
   "person": [
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "roll": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Playboy",
           "roll": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "roll": 40
       }
   ]
}

Hope i will help you :)

【讨论】：

不要忘记解释为什么这会有所帮助，无论是在代码本身中使用内联 cmets，还是在代码之前或之后进行一些简短的解释；这样人们就不会争辩说这是一个“仅代码”的答案。