0

因此，如果我知道我将在 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，但我不明白如何返回“随机”键的值。

4

2 回答 2

1

您可以使用 列出属性Object.keys，排除id属性（因为您似乎没有渲染它），.filter()最后列出属性.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))
于 2017-03-22T21:37:33.220 回答
0

很好的答案 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);
于 2017-03-28T20:52:33.410 回答