How to use json2html with random keys

Question

So, I clearly understand how to transform JSON to HTML if I know what type of data i will get in json.

But how can I use json2html if I don't know what kind of keys I will get from server?

Here code, that works correctly with static keys:

var data = {'json': [{
    'order': 'By',
        'name': 'Stack',
        'randomkey': '3',
        'randomkey_n': '0',
        'score': '121',
        'id': '540'
}]};

var transform = {
    tag: 'tr',
    children: [{
        "tag": "td",
            "html": "${order}"
    }, {
        "tag": "td",
            "html": "${name}"
    }, {
        "tag": "td",
            "html": "${randomkey}"
    }, {
        "tag": "td",
            "html": "${randomkey_n}"
    }, {
        "tag": "td",
            "html": "${score}"
    }]
};

$('#placar > tbody ').json2html(data.json, transform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://json2html.com/js/json2html.js"></script>
<script src="http://json2html.com/js/jquery.json2html.js"></script>
<div class="container">
    <p>
        <table id="placar" class="table table-condensed  table-bordered">
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
</div>

I understand, that I should use inline function in transform, but I can't understand how to return value of "random" keys.

trincot · Accepted Answer · 2017-03-25 21:28:21Z

1

You can list the properties with Object.keys, exclude the id property (as you seem not to render it) with .filter() and finally .map() those to the object structure you need for the children property:

var data = {'json': [{
    'order': 'By',
        'name': 'Stack',
        'randomkey': '3',
        'randomkey_n': '0',
        'score': '121',
        'id': '540'
}]};

var transform = {
    tag: 'tr',
    children: Object.keys(data.json[0]) // get keys
        .filter(key => key !== 'id') // exclude id
        .map(key => ({ // convert to object for transformation
            "tag": "td",
            "html": "${" + key + "}"
        }))
};

$('#placar > tbody ').json2html(data.json, transform);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://json2html.com/js/json2html.js"></script>
<script src="http://json2html.com/js/jquery.json2html.js"></script>
<div class="container">
    <p>
        <table id="placar" class="table table-condensed  table-bordered">
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
</div>

Filtering out more than one key

In case you have other properties that should be excluded like id, then you could do this:

.filter(key => !['id', 'otherfield', 'comment'].includes(key))

Or, if you have many such properties, improve efficiency by first defining a set once:

const excludes = new Set(['id', 'otherfield', 'comment', /* many others...*/]);

...and then the filtering becomes:

.filter(key => !excludes.has(key))

edited Mar 25, 2017 at 21:28

answered Mar 22, 2017 at 21:37

trincot

357k38 gold badges282 silver badges339 bronze badges

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

3 Comments

Some Berry Over a year ago

I need one more answer from you :) i understood that - filter(key => ...) = filter(function(key){return key!== 'id'}, but i didn't understand how can i exclude more than 1 key with this arrow function example. I've just started learning js :)

trincot Over a year ago

I added some ideas to my answer.

Some Berry Over a year ago

oh! yeah, array and includes = boolean retrun :) nice, thank you again!

Chad Brown · Accepted Answer · 2017-03-28 20:52:33Z

Nice answer tincot .. just to add another way of doing this that might be a little easier to understand. You could transform the json object into an array with the property name and value then use a static transform

var data = {'json': [{
    'order': 'By',
        'name': 'Stack',
        'randomkey': '3',
        'randomkey_n': '0',
        'score': '121',
        'id': '540'
}]};

var transform = {"<>": "tr","html":[
            {"<>":"td","html":"${val}"}
        ]};

var _data = [];

for(var i=0; i < data.json.length; i++){

  var out = [];

  for(var prop in data.json[i]) 
    if(prop !== "id") out[i] = {"name":prop,"val":data.json[i][prop]};

  _data.push(out);
}

$('#placar > tbody ').json2html(_data, transform);

Collectives™ on Stack Overflow

How to use json2html with random keys

2 Answers 2

Filtering out more than one key

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Filtering out more than one key

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related