用Javascript解析JSON，用HTML/CSS设置样式

Parsing JSON with Javascript and styling with HTML/CSS

本文关键字：CSS 设置 样式 Javascript 解析 JSON HTML      更新时间：2023-09-26

我在AS3的世界里已经有一段时间了，以前从未接触过JSON文件，对Javascript也是个新手。

我有一个相当简单的JSON文件，看起来像这样: 
{"test_name1": {"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name2":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
 "test_name3":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name4":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name5":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name6":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name7":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name8":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name9":{"voteCount":0,"totalAmount":0,"fullyFunded":false},
"test_name10":{"voteCount":0,"totalAmount":0,"fullyFunded":false}}

我需要阅读这与Javascript，然后用HTML和CSS样式。(我认为?)

我已经通读了教程之类的东西，但我恐怕对其中的一些解释有些茫然。如果有人能示范一下，我会很感激的。我以前在AS3中使用过XML数据，但从未使用过JSON。永远不要JSON+HTML/JS。

请想买。谢谢你。

看起来您可以将此写入定义列表(在HTML中，即<dl>)。

然后遍历json。下面的代码是在没有任何库的情况下完成的(纯JavaScript，供你学习:)

var dl = document.createElement('dl')
for (var key in json) {
  var val = json[key]
  var dt = document.createElement('dt')
  var ddVote = document.createElement('dd')
  var ddAmount= document.createElement('dd')
  var ddFunded = document.createElement('dd')
  dt.innerHTML = key
  ddVote.innerHTML = val.voteCount
  ddAmount.innerHTML = val.totalAmount
  ddFunded.innerHTML = val.fullyFunded
  dl.appendChild(dt)
  dl.appendChild(ddVote)
  dl.appendChild(ddAmount)
  dl.appendChild(ddFunded)
}

你可以用CSS

设置样式
<style>
  dl { } /* definition list */
  dl dt { font-weight: bold; } /* definition term */
  dl dd { color: red; } /* definition data */
</style>

根据解析您的JSON。使用JSON.parse，或者你可能甚至不需要，如果它已经是一个实际的JSON对象在你的JavaScript文件…

var myJSON = { "hello": "world" }

你可以使用JS渲染JSON文件，HTML和CSS使用"下划线模板"为JS。您既可以将JSON文件作为对象放在JS文件中，也可以使用AJAX请求访问它(听起来好像还没有实现)。"Underscore"是一个Javascript库，它将提供一些有用的迭代器来精确地实现你正在寻找的可视化。

看看如何使用旧金山General Assembly的教程实现下划线模板。我不建议分叉，克隆和主演的repo。

相关文章：