如何在JSON中的对象内部加载数组的元素？

Question

I asked a similar (but different) question before.

I've since changed how I'm approaching the problem.

This is my JSON file.

Here's my javascript so far:

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

Basically, I go through each data point and make a new <div> with the id="article1" (or whatever the number of the article may be). Then, since each article object is filled with one array of "sections" , I need to access the data in this array and append it to the <dl></dl> I have.

In my HTML, this is what I'm .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>

I have 2 problems so far:

1. $(article).append(articleH); isn't working

2. I can't load the sections into sectionList .

How do I fix this?

Answer 1

There are lots of ways to approach this, but here's an example that you might be able to modify to suit your application: http://jsfiddle.net/DgU3w/ . (Note that I stripped out some details to try to understand the problem)

A few things I noticed in your example:

• loadArticle() clobbers some work with this statement: $(article).html(thelist);
• loadArticle() clones a block of HTML, but then it appends new elements that match cloned ones.
• It doesn't hurt to wrap jQuery objects (eg $(jQueryObj) ), but it's not necessary either.
• Some IDs were initialized to unique values, but others weren't.