如何使用带有随机键的 json2html答案

【问题标题】：How to use json2html with random keys如何使用带有随机键的 json2html
【发布时间】：2017-08-15 04:00:08
【问题描述】：

所以，如果我知道我将在 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 中使用内联函数，但我不明白如何返回“随机”键的值。

【问题讨论】：

标签： javascript json json2html

【解决方案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))

【讨论】：

我需要你再给我一个答案 :) 我明白 - filter(key => ...) = filter(function(key){return key!== 'id'}，但我不明白如何用这个箭头函数示例排除超过 1 个键。我刚刚开始学习 js :)
我在回答中添加了一些想法。
哦！是的，数组和包含 = boolean rerun :) 很好，再次感谢您！

【解决方案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);

【讨论】：