Parsing JSON with Javascript and styling with HTML/CSS

Question

I will preface this inquiry as that I've been in the world of AS3 for some time, and never touched a JSON file before and very newb at Javascript.

I've got a fairly simple JSON file, which looks like this:

{"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}}

I need to read this with Javascript and then style it with HTML and CSS. (I think?)

I've read through tutorials and whatnot, but I'm afraid I get a bit lost with some of the explanations. If anyone has a demonstration I would really appreciate it. I've worked with XML data before in AS3 but never JSON. And never JSON+HTML/JS.

Please Halp. Thank you.

Answer 1

It looks like you can write this to a definition list (in HTML, that's <dl> . See the spec here .

Then iterate over your json. The following does this without any libraries (pure JavaScript, for your learning :)

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)
}

You can style this with CSS

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

As per parsing your JSON. use JSON.parse , or perhaps you might not even need that if it's already an actual JSON object in your JavaScript file...

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

Answer 2

You can render your JSON file using JS, HTML and CSS using "underscore templating" for JS. You can either place your JSON file inside your JS file as an object, or you can access it using an AJAX request (it sounds as if you may not be there quite yet). "Underscore" is a Javascript library that will provide some useful iterators for precisely the visualization you're looking for.

Take a look at how to implement underscore templating using a tutorial from General Assembly in San Francisco. Would def suggest forking, cloning and starring the repo.