Как построить неупорядоченный список динамически из данных JSON - PullRequest
Новая
       9

Как построить неупорядоченный список динамически из данных JSON

1 голос
/ 28 ноября 2010

Как мне изменить эту функцию, которая динамически создает выпадающий список, чтобы я мог динамически создавать неупорядоченный список из данных json.

</script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() { 
        jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
            $.each(jsonData, function (i, j) {
                document.index.spec_list.options[i] = new Option(j.options);
       });
     });});
</script>

* spec_list * является идентификатором раскрывающегося списка, то есть «выберите» здесь & options т.е. в (j.options) является полем в таблице, данные которого принимаются как json.Теперь у меня есть 'msg' только поле таблицы, данные которого будут использоваться для динамического заполнения 'ul id = "msg"'.

1 Ответ

4 голосов
/ 28 ноября 2010

Похоже, вы хотите добавить li элементы к существующему ul с идентификатором «msg», где содержимое каждого li происходит из свойства .msg каждой записи в jsonData: 

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var markup;

    markup = [];
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        markup.push("<li>");
        markup.push(j.msg);
        markup.push("</li>");
    });

    jQuery('#msg').append(markup.join(""));
});

Вот рабочий пример . (См. Комментарий «не по теме» ниже; в рабочем примере используется один из упомянутых приемов.)

Или, если новые li s должны заменить существующих в ul, используйте 

jQuery('#msg').html(markup.join(""));

... вместо append.

В любом случае, для построения разметки используется хорошо известная идиома «построить его в массиве, а затем join it», что почти всегда более эффективно (в реализациях JavaScript), чем выполнение конкатенации строк. (И сначала создайте разметку, а затем примените ее с помощью одного манипуляционного вызова DOM [в данном случае через jQuery], что определенно определенно будет более эффективным, чем добавление каждого li по отдельности).

Если вы не обеспокоены эффективностью (в конце концов, это показывает результат вызова Ajax, и если вы знаете, что есть только пара li s для добавления ...), вы можете сделать это как это: 

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var ul;

    ul = jQuery('#msg');
    // If you want to clear it first: ul.empty();
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        ul.append("<li>" + j.msg + "</li>");
    });
});

... но если вы имеете дело с большим количеством предметов, или если вы делали это в чем-то, что часто происходило, вам, вероятно, лучше использовать версию для сборки.

Не по теме : Ваш исходный код смешивается с использованием символа jQuery и символа $. Вероятно, лучше придерживаться одного или другого, поэтому я пошел с jQuery выше. Если вы не используете noConflict, или если вы делаете один из изящных приемов для использования noConflict, но все еще можете использовать $, вы можете смело переходить на использование $ повсюду.

...