Question

我目前正在努力显示Web API的结果，我是这种事物的新手，所以请原谅可怕的理解。我的错误归结于身份验证。此后，我发现API链接不正确，现在（通过python）我可以用来调用正确的结果。我的问题在于不知道如何在Javascript中获得相同的结果，并将其解析为仅显示字符串“值”。我将在下面发布来自API的数据样本，并将准确强调我需要的内容。总体目标是在P标记中显示“值”数字，其位置可以在我的HTML中找到。这是我要在其中显示值的html部分：

<div class="card-content">
    <p>The light sensor will detect exterior lighting conditions, and will turn on or off any outside lights based on the enviroment.</p><br>
    <center>
        <div class="reading-circle light" id="tempcircle">
            <!----VALUE HERE IN P ELEMENT---->
        </div>
    </center>
</div>

这是我的JS文件；

const app = document.getElementById('tempcircle');

var request = new XMLHttpRequest();
request.open('GET', 'https://swagger.richard-murphy.iotpdev.com/api/1/devices/snapshot/paged', true);
request.onload = function () {

var data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        data.forEach(sensor => {
            const t_reading = document.createElement('p');
            sensor.value = sensor.value.substring(0, 300);
            p.textContent = `${sensor.value}`;
            tempcircle.appendChild(p);
        });
    }
}
request.send();

API示例

{
    "id": "e370df3d-6283-459f-9d8e-0b614dec578b",
    "name": "Themometer",
    "typeId": "88f06b08-59e0-43ae-ae95-2d4ee4f1a66e",
    "deviceId": "fb903ae2-67de-46cb-8cb7-9eb3faf62e1d",
    "attributes": {},
    "minimumNormalOperatingValue": -15,
    "maximumNormalOperatingValue": 60,
    "minimumValue": 0,
    "maximumValue": 40,
    "displayName": "Thermometer"
  },

上面的示例不包含value属性，因为设备没有记录任何结果，但是当我们通过python运行它时，我们为其赋予了伪值，因为它最终将来自实时传感器

在HTML元素中显示JSON webapi元素

0 个答案: