0

I have to write a javascript/jquery piece of code to display a general JSON into an html view. Basically, I get an unknown json, I parse it, and I have to build html elements reflecting the the JSON structure. Of course it is my choice to associate an html element to a peculiar JSON structure. For example, if I get the following:

[
    {
        "audi": {
            "type": "a4",
            "year": "1999",
            "color": "red",
            "price": "3500"
        }
    },
    {
        "fiat": {
            "type": "idea",
            "year": "2009",
            "color": "silver",
            "price": "4500"
        }
    }
]

I'd like to have a div containing two divs containing 4 spans each, with the type, year, color and price of the car. How can I achieve that?

EDIT:

If you want to follow an approach decoupled form any peculiar implementation you'll have to follow the suggestion of the chosen answer, however it is worth to mention this plugin (json2html) which seems to be very promising.

MaVVamaldo
  • 2,505
  • 7
  • 28
  • 50
  • 3
    What have you found in researching this problem and what have you tried? – DevlshOne Jul 30 '13 at 13:39
  • Downvote - no research effort – Valentin D Jul 30 '13 at 13:42
  • Your question doesn't describe clearly if you found out how to [parse JSON](http://api.jquery.com/jQuery.parseJSON/) already. If you have found that out, then the question is more about displaying an unknown object structure than about parsing JSON. – GolezTrol Jul 30 '13 at 13:42
  • Try using `eval('(' + result + ')');` where `result` contains your json. – Amin Sayed Jul 30 '13 at 13:42
  • let me clarify. I'm not a javscript guy, so I understand I'm missing some basic concepts. Clearly I looked for javascrit JSON library but as far as I've searched it seems that it supports mainly serialization issues, I mean, how to turn a json into an object. Well my problem is that I don't know the json structure and so I won't know the object. I need some GENERAL method which allow me to traverse general json (or object if you prefer). In other words I think I need some getChildren(), getParent() methods – MaVVamaldo Jul 30 '13 at 13:47
  • Here's a fiddle doing pretty-printing of a json using jQuery (for parsing json) and basic javascript for rendering as html (plus css for styling) : http://jsfiddle.net/CFpX3/ – yent Jul 30 '13 at 14:28

1 Answers1

0

You can jQuery's json parser jQuery.parseJSON jQueryDocumentation

Venkata Krishna
  • 14,926
  • 5
  • 42
  • 56
  • so I will have an object. But now I need to explore the object, and I don't know how to do this. In other words, taking the exmple posted in the question, to get the audi type, I'd write `var type = audi.type;`. It works, but I don't now that exist a `type` attribute. It would be quite better if I could access the obj properties in a general way like the following `myJson[i].getChildren()` – MaVVamaldo Jul 30 '13 at 13:52
  • 2
    Here yoy have some examples: http://jsfiddle.net/cKFMn/7/ – Wood Jul 30 '13 at 14:45
  • @Wood : Very nice bud. – Venkata Krishna Jul 30 '13 at 15:15
  • @Wood thank you: it is exactly what I was looking for! If you post it as an answer I'll accept it! – MaVVamaldo Jul 30 '13 at 19:56