javascript - 更新 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 数据的名称，然后在 future 的 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- 执行相反的操作并将关联的属性名称存储在 data- 中所有具有公共(public)类的元素上的属性，并遍历集合，在数据属性中插入由属性找到的文本

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>