Question

编辑：在发布过程中，第一段被删掉了

我是一名退休农民，而不是编码员。我确实涉猎html / js，但两者都不称职。我正在做的是为气象站修改html界面。它仅供我自己在室内使用。我尝试使用的JSON由Raspberry pi上的气象站软件托管，URL列出了几段。

我只会发布我想做的事情，而不是发布任何关于我已经尝试过的事情的信息。下面的代码产生了我想要的-能够使用标签“ extratemp”向HTML页面添加温度。还将采样温度从69.0截断为69。

示例数据实际上包含在主机上的JSON（../api/extra/temp.json）中。同样，我的html页面使用下面的代码显示所需的“ 69”，我似乎无法用JSON中的实时数据替换示例数据（var str = line）。

$(document).ready(function() {

  var str = '{"data":[["Sensor 1","69.0","&deg;F"],["Sensor 2","0.0","&deg;F"],["Sensor 3","0.0","&deg;F"],["Sensor 4","0.0","&deg;F"],["Sensor 5","0.0","&deg;F"],["Sensor 6","0.0","&deg;F"],["Sensor 7","0.0","&deg;F"],["Sensor 8","0.0","&deg;F"],["Sensor 9","0.0","&deg;F"],["Sensor 10","0.0","&deg;F"]]}'
  var jsonData = JSON.parse(str);
  document.getElementById("extratemp").textContent = Math.floor(jsonData.data[0][1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="extratemp"></div>

非常感谢您的帮助。

谢谢

Answer 1

您可以使用jQuery的getJSON函数下载JSON文件并通过回调函数对其进行处理：

$.getJSON( "../api/extra/temp.json", function( data ) { ... });

根据您的数据，JSON对象是一个数组数组，主数组的每个项目都包含3个值：

[ ["Sensor 1", "69.0", "&deg;F"], [...], ...]

再次使用jQuery库，您可以使用$ each函数迭代主数组的每一项，然后按索引（0,1,2）访问任何特定的子项。

$.each(data, function( index, item ) {
  console.log("Item =>",  {item[0], item[1], item[2]} );
});

请参阅：https://api.jquery.com/jquery.getjson/，http://api.jquery.com/jquery.each/

将JSON数据转换为字符串

1 个答案: