Javascript or jQuery way to display random-level JSON as HTML

Question

I would like to parse and display arbitrary-level JSON snippets as HTML. By arbitrary-level I mean there is no pre-definied structure. For example:

"CustomFields": [
                {
                    "Main": [
                        {
                            "None": [
                                {
                                    "SDOM Date": "2014-12-24"
                                },
                                {
                                    "User Defined 31": "2009-03-02"
                                }
                            ]
                        },
                        {
                            "Contract Data": [
                                {
                                    "Status2": "Active"
                                },
                                {
                                    "User Defined 112": "N"
                                }
                            ]
                        }
                    ]
                }

Besides the CustomFields root element, everything under it is unpreditable. But basically there are layers of objects which are each an array of other objects, until you finally arrive at an object value. In the example above there are 4 levels. But there can be any number of them.

What I'd like is to display something like:

Main
- None
  - SDOM Date: 2014-12-24
  - User Defined 31: 2009-03-02
- Contract Data
  - Status2: Active
  - User Defined 112: N

possible duplicate of [How to parse multidimensional JSON to html easily?](http://stackoverflow.com/questions/26031010/how-to-parse-multidimensional-json-to-html-easily) — Mik378, Jan 04 '15 at 03:28
I believe I saw that question, and if I'm not mistaken, while it's also multi-level, it has a pre-defined structure and a known number of levels of data. — yuяi, Jan 04 '15 at 03:30
See if [this answer](http://stackoverflow.com/a/11922384/2055998) helps. — PM 77-1, Jan 04 '15 at 03:45
@PM77-1's link is more along the lines of what I was looking for. In my opinion, this is not a duplicate of the question mentioned by Mik378. — yuяi, Jan 04 '15 at 04:03
I believe you are looking for the word "[arbitrary](http://www.merriam-webster.com/dictionary/arbitrary)", not "[random](http://www.merriam-webster.com/dictionary/random)". — JDB, Jan 04 '15 at 04:05
possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Qantas 94 Heavy, Jan 04 '15 at 14:28

Sampath Liyanage · Accepted Answer · 2015-01-04T07:32:57.250

Try this..

var json = {"CustomFields": [
                {
                    "Main": [
                        {
                            "None": [
                                {
                                    "SDOM Date": "2014-12-24"
                                },
                                {
                                    "User Defined 31": "2009-03-02"
                                }
                            ]
                        },
                        {
                            "Contract Data": [
                                {
                                    "Status2": "Active"
                                },
                                {
                                    "User Defined 112": "N"
                                }
                            ]
                        }
                    ]
                }]};

function jsonToHtml(array){
    var html = '<ul>';
    for (var i=0; i<array.length; i++){
        if (typeof array[i] == 'object'){
            for (var j in array[i]){
                var innerHTML = (typeof array[i][j]=='object')?jsonToHtml(array[i][j]):' : '+array[i][j];
                html += '<li>'+j+innerHTML+'</li>';
            }
        }
    }
    html += '</ul>';
    return html;
}
    
aaa.innerHTML = jsonToHtml(json.CustomFields);

<div id="aaa"></div>

**render()** may not be the best choice for function name. But it does work for what I need. Thanks. — yuяi, Jan 04 '15 at 05:24

Javascript or jQuery way to display random-level JSON as HTML

1 Answers1