How to structure JSON and build HTML via jQuery

后端未结

关注

 4  1475

臣服心动

Beginner here trying to figure out best way to structure some JSON and output the below nested

Each of the bolded items below are the values in the JSON. How

相关标签:

4条回答

小蘑菇

2021-02-03 14:58

I have become a big fan of mustache.js recently for doing exactly this kind of thing.

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

Edit:

if I tweak calvinf's JSON format a little then this is an example using 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>

If you want a speed benchmark for JavaScript templating libraries I found this link useful:

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

0 讨论(0)

感动是毒

2021-02-03 14:59

You can use DOM-like methods to set attributes and text content instead to avoid the HTML-escaping issues you'll have with plain html()-setting and the more naïve of the templating systems. For example using jQuery 1.4 and with JSON input along the lines of calvinf's example:

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

0 讨论(0)

萌比男神i

2021-02-03 15:09

I would recommend the excellent underscore.js's template function for this sort of thing.

0 讨论(0)
发布评论:

提交评论
- 加载中...
广开言路

2021-02-03 15:13
First recommendation is taking a look at the JSON site. It has some examples of JSON code in JavaScript.

If you're structuring the whole thing out of JSON, I'd do it like this.
```
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"}
    ]
  }
};
```
If you only need a subset of the information you could do it differently, but this should give you something to start with.

To update the DOM with these values, you can loop through the appropriate array from the JSON object and then populate the values. Use the jQuery .html( htmlString ) function.

I hope this helps you get started.
0 讨论(0)
发布评论:

提交评论
- 加载中...