0

I've been building a virtual rubik's cube on codepen using JS and CSS only. - Forgive me any apparent stupidity, I have been coding less than 3 months, and less than 1 month in JS.

I currently have made two versions, but for version 3 I need to generate as much of my HTML as possible using JSON and JS loop structures. Despite doing tonnes of reading on JSON, I can't quite get my head around the concept of using it to generate HTML like I have been with standard JS arrays. See codepen link-- http://codepen.io/Peachey_A/pen/hEcDH

Whilst I have used a little bit of JQuery to add class attributes in version 2; I would like to steer clear of it in the generation process as my goal is to understand JS before getting too involved with libraries.

Any advice of specific websites or code snippet examples would be greatly appreciated.

Thanks

Peachey_A
  • 129
  • 1
  • 2
  • 8
  • Be careful to use `.className` and not `.class` - that mistake is in at least one place. To set attributes of newly-created DOM elements, just set them as object properties like you're already doing with "id" and "className". – Pointy Jun 24 '14 at 15:09
  • Also, stop using `for ... in` loops for iterating through arrays. Instead always use either a simple `for` loop with an index variable, or use `.forEach()`. – Pointy Jun 24 '14 at 15:10
  • Finally, it's not clear what your question is. Exactly what is it that you don't understand? what does JSON have to do with anything? You should post the actual problematic code **here**. – Pointy Jun 24 '14 at 15:11
  • JSON is just an object notation. You can use it exactly like JS objects and arrays that you are already used to. – Steve Jun 24 '14 at 15:11
  • Thanks for the pointers, and sorry for my clear naivety in posting this question. – Peachey_A Jun 25 '14 at 08:21

3 Answers3

0

As far as manipulating JSON I recommend using a library (if your browser doesn't support it natively), but if you are trying to get away from jQuery you should take a look at http://youmightnotneedjquery.com/

edhedges
  • 2,722
  • 2
  • 28
  • 61
0

JSON is a transport format and not a layout language/markup language. You need some JS to parse and understand the data that comes with it and some HTML building tool to turn it to HTML.

You could build a parser if you want to but that takes too much time. That will not help you much in learning the language. Besides, jQuery has a built-in parser which would be of great help already. 

var div = $('<div/>',{id : 'foo'})[0]; // instant <div id="foo"></div>

Other tools that generate HTML from JS objects are templating libraries like Mustache and Handlebars.

On a side-note, don't learn the language itself. Learn how to use the language. Eventually, you'll know the other quirks which you have jumped over when using libraries. Also, don't foster the "Not Invented Here" Philosophy. It just wastes your time. Spend more time on things that metter.

Joseph
  • 117,725
  • 30
  • 181
  • 234
0

First I believe you will need to convert that JSON into Javascript. Take a look at this great answer Parse JSON in JavaScript?. Now, for browsers that don't support the conversion a library is suggested. If you want to do it by hand, a JSON parser is a project on it's own.

Once you are done with that you can manipulate the objects, iterate through them

and start spitting the html based on the data of your JSON.

Community
  • 1
  • 1
Ernesto
  • 1,523
  • 1
  • 14
  • 32