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.

Answer 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))