Как структурировать JSON и создать HTML с помощью jQuery

Question

Как структурировать JSON и создать HTML с помощью jQuery

Новичок, здесь пытающийся выяснять лучший способ структурировать некоторый JSON и произвести ниже вложенного <ул.>

Каждый из полужирных объектов ниже является значениями в JSON. Как я мог бы структурировать JSON и затем как создать структуру DOM с jQuery? Любая справка значительно ценится.

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

6

jquery json

задан Brandon 30 July 2010 в 20:10

4 ответа

Другие вопросы по тегам:

jquery json

Похожие вопросы:

score 2 · Answer 1

Я бы порекомендовал отличную функцию underscore.js template для такого рода вещей.

2

ответ дан 8 December 2019 в 15:58

score 3 · Answer 2

Первая рекомендация - взглянуть на сайт JSON . В нем есть несколько примеров кода JSON в JavaScript.

Если вы все структурируете из 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) .

Надеюсь, это поможет вам начать работу.

score 5 · Answer 3

Недавно я стал большим поклонником mustache.js для выполнения именно таких вещей.

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

Edit:

если я немного подправлю формат JSON от Calvinf, то вот пример с использованием 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/

score 5 · Answer 4

Вместо этого вы можете использовать методы, подобные DOM, для установки атрибутов и текстового содержимого, чтобы избежать проблем с экранированием HTML, которые могут возникнуть при простой настройке html () и более наивной из систем шаблонов. Например, с использованием jQuery 1.4 и ввода JSON в соответствии со строками примера calvinf:

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