更新 html 标签中动态 api 值的最佳实践

Question

我每分钟获取 api 信息更新仪表板。

有效载荷的一个例子是

      "dew_point": "46.6", 
      "humidity": "44.0", 
      "is_cloudy": "Cloudy", 
      "is_raining": "No", 
      "is_wet": "No", 
      "temperature": "69.4", 
      "timestamp": "2020-08-28 22:53:44", 
      "wind_speed": "2.2"

我有一个充满 p 的 div，其中填充了该数据，API 有效负载保存在一个名为 data 的变量中。

目前，我正在更新这些数据

// Api data saved in data
var data = response;
var temperatureText = document.getElementById("temperatureText");
temperatureText.textContent = data.temperature;

但是，在我的应用程序中，api 返回了大约 50 个数据条目。 我觉得我正在对这个更新过程进行硬编码，并且在标签 ID 和 api 名称上使用一些格式可以使这个在某些循环中更容易。

更新此数据的正确过程是什么？ 我是否应该更改我的文本段落的 ID 以匹配 API 负载并循环？ 我是否应该在第一次加载页面时使用 API 响应构建 div，将每个段落称为 API 数据的名称，然后在以后的 api 调用中循环更新？

我想让它尽可能模块化。

Answer 1

这里有两种可能的方法：

1- 在要显示的数据中保留一个属性名称数组，并按照您的建议进行操作，使元素中的 ID 具有与有效负载属性一致的格式。

然后遍历要显示的属性数组并插入 DOM

简单示例：

 const data={dew_point:"46.6",humidity:"44.0",is_cloudy:"Cloudy",is_raining:"No",is_wet:"No",temperature:"69.4",timestamp:"2020-08-28 22:53:44",wind_speed:"2.2"}; const wanted_keys = ["dew_point", "temperature"]; wanted_keys.forEach(k => document.getElementById('w-' + k).textContent = data[k])

 Dew: <span id="w-dew_point"></span>, Temp:<span id="w-temperature"></span>

要么

2- 执行相反的操作并将关联的属性名称存储在所有具有公共 class 的元素的data-属性中，并循环遍历数据属性中的属性找到的插入文本的集合

 const data={dew_point:"46.6",humidity:"44.0",is_cloudy:"Cloudy",is_raining:"No",is_wet:"No",temperature:"69.4",timestamp:"2020-08-28 22:53:44",wind_speed:"2.2"}; document.querySelectorAll('.w-data').forEach(el=> el.textContent = data[el.dataset.key])

 Dew: <span class="w-data" data-key="dew_point"></span>, Temp:<span class="w-data" data-key="temperature"></span>