如何在JSON中的對象內部加載數組的元素？

Question

我之前問過類似（但不同）的問題 。

此后，我改變了解決問題的方式。

這是我的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);
})

基本上，我遍歷每個數據點並使用id="article1" （或任何文章編號）創建一個新的<div> 。 然后，由於每個article對象都填充有一個"sections"數組，因此我需要訪問該數組中的數據並將其附加到我擁有的<dl></dl>中。

在我的HTML中，這就是我的.clone() ：

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

我該如何解決？

Answer 1

有很多方法可以解決此問題，但以下示例可以根據您的應用程序進行修改： http : //jsfiddle.net/DgU3w/ 。 （請注意，我刪除了一些詳細信息以嘗試理解問題）

我在您的示例中注意到了一些事情：

• loadArticle()使此語句變得有些有用： $(article).html(thelist);
• loadArticle()克隆HTML塊，但隨后會添加與克隆的元素匹配的新元素。
• 包裝jQuery對象（例如$(jQueryObj) ）並沒有什么壞處，但是也沒有必要。
• 一些ID被初始化為唯一值，而其他則沒有。