如何使用带有随机键的 json2html

Question

所以，如果我知道我将在 json 中获得什么类型的数据，我清楚地了解如何将 JSON 转换为 HTML。

但是如果我不知道我将从服务器获得什么样的密钥，我如何使用 json2html？

此处的代码可与静态键一起正常工作：

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>

我明白，我应该在 transform 中使用内联函数，但我不明白如何 return "random" 键的值。

Answer 1

您可以使用 Object.keys 列出属性，使用 .filter() 排除 id 属性（因为您似乎没有渲染它），最后 .map() children 属性:

所需的对象结构

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>

过滤掉多个键

如果您有其他应排除的属性，如 id，那么您可以这样做：

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

或者，如果你有很多这样的属性，通过先定义一个集合来提高效率：

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

...然后过滤变成：

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

Answer 2

tincot 回答得很好 .. 只是添加另一种可能更容易理解的方法。您可以将 json 对象转换为具有属性名称和值的数组，然后使用静态转换

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

如何使用带有随机键的 json2html

How to use json2html with random keys

javascript

json

json2html

过滤掉多个键