Как загрузить элементы массива внутри объекта в JSON?

0

Раньше я задавал аналогичный (но другой) вопрос.

С тех пор я изменил свое отношение к проблеме.

Это мой JSON файл.

Вот мой javascript:

$(document).ready(function () {
    var loadArticle = function (articleID, articleH) {
        var article = $("#article").clone();
        var thelist = '<dl id="article' + articleID + 'sections"></dl>';

        $(article).attr("id", "article" + articleID);
        $(article).append(articleH);
        $(article).html(thelist);

        return article;
    }
    var loadSection = function (articleID, sectionID, sectionContent) {
        var section = "#article" + articleID + "sections";

        $(section).append("<dt>Section " + sectionID + "</dt>");
        $(section).append("<dd>" + sectionContent + "</dd>");

        return section;
    }
    var loadConstitution = function (d) {
        $.each(d, function (i) {
            var articleID = i + 1;
            var articleH = "<p class='lead' id='article" + articleID + "'><strong>Article " + articleID + "</strong></p>";
            $("#constitutionHolder").append(loadArticle(articleID, articleH));

            //$.each(d.sections, function(j){
            //  var sectionID = j + 1;
            //  var theSection = d.sections[j];
            //$("#article" + articleID + "sections").append(articleID, sectionID, mySection);
            //})
        })
    }
    $.getJSON('data/stuff.json', loadConstitution);
})

В принципе, я просматриваю каждую точку данных и создаю новый <div> с id="article1" (или каким бы то ни было номером статьи). Затем, поскольку каждый объект статьи заполняется одним массивом "sections", мне нужно получить доступ к данным в этом массиве и добавить его в <dl></dl> меня есть.

В моем HTML это то, что я .clone() ing:

<div id="constitutionHolder">
    <div class="alert text-black" id="article">
        <p class="lead" id="articleHeader"><strong>Article 1</strong>
        </p>
        <dl id="sectionList"> <dt id="article_section">Section 1</dt>
            <dd id="article_sectionINFO">this stuff belongs to section 1</dd>
        </dl>
    </div>
</div>

До сих пор у меня есть 2 проблемы:

  1. $(article).append(articleH); не работает

  2. Я не могу загрузить разделы в sectionList.

Как это исправить?

  • 0
    пожалуйста, сделайте отступ в своем коде, чтобы было легко понять, что и в какой области жизни.
  • 0
    Предлагаем вам создать демо в jsfiddle.net.
Показать ещё 6 комментариев

1 ответ

1
Лучший ответ

Есть много способов приблизиться к этому, но вот пример, который вы могли бы изменить в соответствии с вашим приложением: http://jsfiddle.net/DgU3w/. (Обратите внимание, что я удалил некоторые детали, чтобы попытаться понять проблему)

Несколько вещей, которые я заметил в вашем примере:

  • loadArticle() clobbers некоторые работы с этим утверждением: $(article).html(thelist);
  • loadArticle() клонирует блок HTML, но затем он добавляет новые элементы, которые соответствуют клонированным.
  • Не помешает обертывать объекты jQuery (например, $(jQueryObj)), но это тоже не нужно.
  • Некоторые идентификаторы были инициализированы уникальными значениями, а другие - нет.
  • 0
    Я положил его на математике клуб сайте под информационной страницей. Работает отлично. Спасибо!
  • 0
    Рад, что все получилось. Хороший сайт и спасибо за комментарий!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню