創建使用JSON和jQuery的動態列表

JSON文件創建使用JSON和jQuery的動態列表

{ 
"subject": "title", 
"level": [ 
{ 
    "title":"Test1", 
    "sub":[{ 
    "title":"Test1 sub_1", 

    "links":[{ 
    "title":"Test1sub1.1link_title", 
    "address":"linkAddress" 
    },{ 
    "title":"Test1sub1.2_link_title", 
    "address":"linkAddress" 
    } 
    ] 

    },{ 
    "title":"Test2 sub_2", 

    "links":[{ 
    "title":"Test2sub2.1_link_title", 
    "address":"linkAddress" 
    },{ 
    "title":"Test2sub2.2_link_title", 
    "address":"linkAddress" 
    } 
    ] 
    }] 
}, 
{ 
    "title":"Test3", 
    "sub":[{ 
    "title":"Test3 sub_1", 

    "links":[{ 
    "title":"Test31.1_link_title", 
    "address":"linkAddress" 
    },{ 
    "title":"Test31.2_link_title", 
    "address":"linkAddress" 
    } 
    ] 

    }] 
} 

] 
}

在我的標記，我有以下

var json = $.getJSON('datar.json',function(data){ 
for(var i =0; i< data.level.length; i++){ 

    console.log(data.level[i].title); 
    $('#accordion').append("<li>"+data.level[i].title+"</li>"); 

    for (var k = 0; k<data.level[i].sub.length; k++){ 

    console.log(data.level[i].sub[k].title); 
    $('#accordion').append("<li>"+data.level[i].sub[k].title+"</li>"); 
    for (var j = 0; j<data.level[i].sub[k].links.length; j++){ 

    console.log(data.level[i].sub[k].links[j].title); 
    $('#accordion').append("<li>"+data.level[0].sub[j].links[i].title+"</li>"); 

    } 
    } 
    }

正如我們看到的，我通過循環和追加到創建動態名單。 Fom我的console.log輸出我收到我需要的正確格式。

Test1 
Test1 sub_1 
Test1sub1.1link_title 
Test1sub1.2_link_title 
Test2 sub_2 
Test2sub2.1_link_title 
Test2sub2.2_link_title 
Test3 
Test3 sub_1 
Test31.1_link_title 
Test31.2_link_title

但是頁面本身的顯示不正確的，

Test1 
Test1 sub_1 
Test1sub1.1link_title 
Test2sub2.1_link_title 
Test2 sub_2 
Test1sub1.1link_title 
Test2sub2.1_link_title 
Test3 
Test3 sub_1 
Test1sub1.2_link_title 
Test2sub2.2_link_title

如果有人可以提供建議，將不勝感激。

來源

2014-10-02 samuk

在您的標記的最後追加之間的相同指數的元素，你說的水平[ 0]，它告訴它查看test1的json對象的第一個元素。我認爲你想要做的是級別[i] – 2014-10-02 06:38:54

你搞砸了索引。用'$（'＃accordion'）替換'$（'＃accordion'）。append（「

」+ data.level [0] .sub [j] .links [i] .title +「

」）; append（「

」+ data.level [i] .sub [k] .links [j] .title +「

」）;' – Regent 2014-10-02 06:39:41

這就是爲什麼我更喜歡[Array.forEach（）]（https：//developer.mozilla .ORG/EN-US /文檔/網絡/的JavaScript /參考/ Global_Objects /陣列/的forEach）。索引錯誤太容易了。 – dusky 2014-10-02 07:23:55

看一看最後的for循環：

console.log(data.level[**i**].sub[**k**].links[**j**].title); 
$('#accordion') 
    .append("<li>"+data.level[**0**].sub[**j**].links[**i**].title+"</li>");

=>它不執行console.log和追加

來源

2014-10-02 06:52:52 Sher

創建使用JSON和jQuery的動態列表

回答

相關問題