json2html - 为什么使用此代码在页面上显示内容？

Question

我的 JSON 很好。我遵循了 json2html 网站上的一个非常简单的示例……没有任何显示。

<script type="text/javascript">
        
$.getJSON( "news/list/category/news/format/json",  function(data) { 

 

var transforms = {
 stories: [
    {'<>':'ul','class':'stories','html':function() {
        return($.json2html(this.groups,transforms.group));
    }}
 ],
 group: [
  {"<>": "li", "id":"id", "html":[
    {"<>": "span", "html": "${AUTHOR} ${HEADLINE}"}
    ]}
 ]
};
 
$('#stories').json2html(data, transforms.stories);

})

</script> 

Answer 1

首先，如果您可以将实际的 JSON 粘贴到您的问题中，这将有助于解决问题。

这可能是你出错的地方

stories: [
    {'<>':'ul','class':'stories','html':function() {
        return($.json2html(this.groups,transforms.group));
    }}
 ],

让我看看这是如何工作的

第一的

$('#stories').json2html(data, transforms.stories);

将数据对象转换为故事

stories: [
    {'<>':'ul','class':'stories','html':function() {
        return($.json2html(this.groups,transforms.group));
    }}  ],

Stories 将“组”属性下的对象转换为组

group: [
  {"<>": "li", "id":"id", "html":[
    {"<>": "span", "html": "${AUTHOR} ${HEADLINE}"}
    ]}
 ]

Group 将组对象转换为具有跨度的列表项。

所以你的 json 对象最好看起来像

[{"groups":[{"AUTHOR":"Someone","HEADLINE":"Someheadline"},..]}]

尽管由于组仅用作示例，我怀疑您的 json 对象看起来更像这样（最好将实际的 JSON 粘贴到您的问题中）

[{"AUTHOR":"Someone","HEADLINE":"Someheadline"},..]

在这种情况下，只需使用以下代码片段即可。请记住，转换只是 $.getJSON 中 JSON 数组中每个对象所需的 html（模板）的表示

var data = [{"AUTHOR":"Someone","HEADLINE":"Someheadline"}];

var transforms = {
 story: [
  {"<>": "li", "id":"id", "html":[
    {"<>": "span", "html": "${AUTHOR} ${HEADLINE}"}
    ]}
 ]};

$("#stories").json2html(data,transforms.story);

//OR using getJSON
$.getJSON( "news/list/category/news/format/json",  function(data) { 
    $('#stories').json2html(data, transforms.story);
});