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

我每分钟都在获取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调用中循环更新

---

我想使其尽可能模块化。

这里有两种可能的方法：

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

然后循环遍历要在DOM中显示和插入的属性数组

简单的例子：

常数数据={露点：46.6，湿度：44.0，多云：多云，下雨：否，潮湿：否，温度：69.4，时间戳：2020-08-28 22:53:44，风速：2.2}； 常数=露点、温度； wanted_keys.forEachk=>document.getElementById'w-'+k.textContent=data[k]

---

Dew:，Temp:我通常倾向于使用数据属性。您可以使用[data-x]轻松地选择它们，然后使用该值从您的API响应中标识相应的字段。@Sirko查看charliefl示例2，这就是您将使用的开发技术？是的，尽管我认为附加类不是真的必要。感谢您的响应。我倾向于选择2。你会推荐我用javascript构建html吗？因为它大约有50个条目，并且有一个const weatherKey，其中包含API中的所有名称，并将其附加到每个元素上。我没有这样做，只是因为我不知道使用的布局。例如，若它是表，那个么保持插入行就很简单了