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.

"I need to read this with Javascript and then style it with HTML and CSS". What do you mean, it? — Sebas
– Sebas, Commented Jul 15, 2015 at 23:55
I'm feeling a bit like a nut that's for sure. I have a codepen I was working on as well.. codepen.io/anon/pen/XbYwgL — user2561920
– user2561920, Commented Jul 16, 2015 at 0:26

ded · Accepted Answer · 2015-07-16 00:03:20Z

2

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

answered Jul 16, 2015 at 0:03

ded

1,3501 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2561920 Over a year ago

Thanks very much, would you mind to chat with me a bit more? I started a code pen, i would like to call certain information, based on certain selections. For example at any one time I'm only displaying the information for one particular title. I don't want to display all the information at once. I have a good understanding of HTML/CSS/GSAP and AS3 as I mentioned but I'm having a bit of a mental break here. Here is my codepen: codepen.io/anon/pen/XbYwgL

user2561920 Over a year ago

Thank you that is very handy. I have a few questions, it seems everything I read says to use AJAX (Jquery) and moustace.js to parse JSON. Why is this prefered over the simple non-JQuery way? Here is my codepen so far. codepen.io/anon/pen/ZGjWyw I'm also very stuck on pulling just one Key per div and just the value for that one key. Basically I'm asking how to target and then format one key at a time based on what button is clicked? My experience is with XML so i'm thinking in terms of Parents and Children - could use some additional help. Thanks.

Brennan · Accepted Answer · 2015-07-16 00:12:49Z

0

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.

answered Jul 16, 2015 at 0:12

Brennan

1698 bronze badges

Collectives™ on Stack Overflow

Parsing JSON with Javascript and styling with HTML/CSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related