如何构建JSON和通过jQuery

初学者打造HTML这里试图找出构建一些JSON每个加粗项目的最佳途径和输出以下嵌套<UL>如何构建JSON和通过jQuery

以下是在JSON的值。我如何构建JSON，然后如何使用jQuery构建DOM结构？任何帮助不胜感激。

<ul> 
    <li>Topic 1 
     <ul> 
      <li id="foo_item1a"> 
       <a href="destination_Item1a"> 
        <strong>Lorem</strong> 
        <span>Item 1a</span> 
        <em>Ipsum</em> 
       </a> 
      </li> 
      <li id="foo_item1b"> 
       <a href="destination_Item1b"> 
        <strong>Dolor</strong> 
        <span>Item 1b</span> 
        <em>Sit</em> 
       </a> 
      </li> 
     </ul> 
    </li> 
    <li>Topic 2 
     <ul> 
      <li id="foo_item2a"> 
       <a href="destination_Item2a"> 
        <strong>Lorem</strong> 
        <span>Item 2a</span> 
        <em>Ipsum</em> 
       </a> 
      </li> 
      <li id="foo_item2b"> 
       <a href="destination_Item2b"> 
        <strong>Dolor</strong> 
        <span>Item 2b</span> 
        <em>Sit</em> 
       </a> 
      </li> 
     </ul> 
    </li> 
</ul>

来源

2010-07-30 Brandon

看看这里：http://stackoverflow.com/questions/1082928/convert-json-to-html-tree – 2010-07-30 20:19:40

我已经成为mustache.js一个大风扇最近做正是这种事情。

http://github.com/janl/mustache.js/

编辑：

如果我调整calvinf的JSON格式有点那么这是一个例子使用mustache.js：

<html> 
    <head> 
    <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script> 
    <script type="text/javascript"> 
    var topics = { 
    topics: [ 
    { 
    title : "Topic 1", 
    items : [ 
     {title: "1a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "1b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    }, 
    { 
    title : "Topic 2", 
    items : [ 
     {title: "2a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "2b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    } 
    ]}; 


var template = "<ul>{{#topics}}<li>{{title}}<ul>{{#items}}<li id=\"foo_item{{title}}\"><a href=\"{{link}}\">{{text}}</a></li>{{/items}}</ul>{{/topics}}</ul>"; 

     $(document).ready(function() { 
    $("#topics").html(Mustache.to_html(template, topics)); 
     }); 

    </script> 
    <title></title> 
    </head> 
    <body> 
    <div id="topics"></div> 
    </body> 
</html>

如果你想对JavaScript的速度标杆模板库我发现这个链接有用：

http://www.viget.com/extend/benchmarking-javascript-templating-libraries/

来源

2010-07-30 20:27:31

胡子.js是一个很好的模板系统。我还会看看jquery-tmpl，因为它可能会包含在jQuery 1.5中，基于jeresig所做的评论。 http://github.com/jquery/jquery-tmpl – calvinf 2010-07-30 20:55:26

Resig的模板是超级危险的，因为默认情况下（甚至可选）HTML编码失败。您在其上构建的任何内容都注定要发生数千次HTML注入XSS安全漏洞。保持良好的状态。（胡须不会造成这个严重的错误。） – bobince 2010-07-30 22:13:13

@bobince - 虽然我完全同意在客户端JavaScript中没有HTML选项**的HTML编码输入是不行的，是不是更好的做法来处理服务器端的HTML编码？ – 2010-08-04 17:56:52

第一个建议是看看JSON site。它在JavaScript中有一些JSON代码的例子。

如果您使用JSON构建整个事情，我会这样做。

var topics = { 
    topic1: { 
    title : "Topic 1", 
    items : [ 
     {title: "1a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "1b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    }, 
    topic2: { 
    title : "Topic 2", 
    items : [ 
     {title: "2a", link: "http://www.example.com/", text: "Link Text or HTML"}, 
     {title: "2b", link: "http://www.example.com/", text: "Link Text or HTML"} 
    ] 
    } 
};

如果你只需要一部分信息，你可以做不同的事情，但这应该给你一些开始。

要使用这些值更新DOM，可以从JSON对象遍历相应的数组，然后填充这些值。使用jQuery .html(htmlString) function。

我希望这可以帮助您开始。

来源

2010-07-30 20:27:37 calvinf

我会为这类事情推荐优秀的underscore.js的template函数。

来源

2010-07-30 20:41:04

您可以使用类似于DOM的方法来设置属性和文本内容，以避免您在使用简单的模板系统和更简单的模板系统时遇到的HTML转义问题。例如使用jQuery 1.4和沿calvinf的例子的JSON行输入：

var ul0= $('<ul>'); 
$.each(topics, function() { 
    var li0= $('<li>', {text: this.title}); 
    var ul1= $('<ul>'); 
    $.each(this.items, function() { 
     ul1.append($('<li>', {id: 'foo_'+this.title}) 
      .append($('<a>', {href: this.link, text: this.text}) 
       .append($('<strong>', {text: this.data0})) 
       .append($('<span>', {text: this.data1})) 
       .append($('<em>', {text: this.data2})) 
      ) 
     ); 
    }); 
    li0.append(ul1); 
    ul0.append(li0); 
});

来源

2010-07-30 22:21:15 bobince

如何构建JSON和通过jQuery

回答

相关问题