Some Berry Some Berry -4 years ago 192
JSON Question

How to use json2html with random keys

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download