如何使用带有随机键的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使用内联函数，但是我不明白如何返回“随机”键的值。

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