Daha önce bir soruya cevap verdim: Populate JSON file data into Array then feed Array into mmenu plugin bana tüm JSON verilere tam olarak erişebilmeme izin verdi, ancak sadece bir dizi için. Kod ölçeğini daha da geliştirmek istiyorum, bu yüzden bunu gerçekleştirmek için dizileri yuvalamaya çalışıyorum. Sorunumun, bir JSON iç içe yerleştirme sorunuyla ve verilere erişen döngü işleviyle ilgili olmadığını düşünüyorum.Karmaşık JSON iç içe geçme ve döngü yoluyla erişme
<nav id="menu">
<ul>
<!-- Pavers -->
<li><a href="#id01" id="menuTitle">Pavers</a>
<div id="id01"></div>
</li>
<!-- Circles -->
<li><a href="#id02">Circles</a>
<div id="id02"></div>
</li>
<!-- Walls -->
<li><a href="#id03">Walls</a>
<div id="id03"></div>
</li>
</ul>
</nav>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('menu.json').done(function(data){
$('#menuTitle').html(data.name);
var lis = "<ul>"
for(var i = 0; i < data.pavers.length; i++)
lis += '<li><a href="'+ data.pavers[i].url+'">' + data.pavers[i].display + "</a></li>";
lis += "</ul>"
document.getElementById("id01").innerHTML = lis;
$('nav#menu').mmenu();
});
});
</script>
JSON Dosyası:
{
"name": "Pavers",
"pavers": [
{
"display": "Brukstone",
"url": "brukstone.html"
},
{
"display": "Bulovar",
"url": "pavers/bulovar.html"
},
{
"display": "Cobble",
"url": "pavers/cobble.html"},
{
"display": "Cracovia",
"url": "pavers/cracovia.html"
},
{
"display": "Filtrapave",
"url": "pavers/filtrapave.html"
},
{
"display": "Holland",
"url": "pavers/holland.html"
},
{
"display": "Old Munich",
"url": "pavers/oldmunich.html"
},
{
"display": "Strassen Classic",
"url": "pavers/strassen.html"
},
{
"display": "Strassen Bavaria (Tumbled)",
"url": "pavers/strassenbavaria.html"
},
{
"display": "Strassen Barvaria II (Non-tumbled)",
"url": "pavers/strassenbavariaii.html"
},
{
"display": "Vavel Stone (Tumbled)",
"url": "pavers/vavel.html"
},
{
"display": "Vavel Stone II (Non-tumbled)",
"url": "pavers/vavelii.html"
}
]
}
ilk düşüncem ve ne
HTML/script w: Burada
çalışır basit dizi çözüm Ben yapmaya çalışıyorum veri bir l yuva dizileri birleştirmek için daha derine. Bundan sonra, her şeye erişilebildiğinden emin olmak için for-döngüyü yerleştirdim. yuvalama çözümeBenim girişimi:
HTML w/Senaryo:
<nav id="menu">
<ul>
<!-- Pavers -->
<li><a href="#id00" id="menuTitle00">Paver</a>
<div id="id00"></div>
</li>
<!-- Circles -->
<li><a href="#id01" id="menuTitle01">Circles</a>
<div id="id01"></div>
</li>
<!-- Walls -->
<li><a href="#id02" id="menuTitle02">Walls</a>
<div id="id02"></div>
</li>
</ul>
</nav>
<script type="text/javascript">
$.getJSON('menu.json').done(function(data){
// IF SUCCESS
alert('getJSON request succeeded!');
for(x=0; x < data.object.length; x++){
$('#menuTitle0'+x).html(data.object[x].name);
lis = "<ul>"
for(i = 0; i < data.object[x].links.length; i++){
lis += '<li><a href="'+ data.object[x].links[i].url+'">' + data.object[x].links[i].display + "</a></li>";
}
lis += "</ul>"
document.getElementById("id0"+x).innerHTML = lis;
$('nav#menu').mmenu();
}})
// IF FAILURE
.fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus); })
//IF SCRIPT TRIED TO EXECUTE
.always(function() { alert('getJSON request ended!'); });
</script>
JSON Dosyası:
{"object":
[
{
"name": "Pavers",
"links": [
{
"display": "Brukstone",
"url": "brukstone.html"
},
{
"display": "Bulovar",
"url": "pavers/bulovar.html"
},
{
"display": "Cobble",
"url": "pavers/cobble.html"},
{
"display": "Cracovia",
"url": "pavers/cracovia.html"
},
{
"display": "Filtrapave",
"url": "pavers/filtrapave.html"
},
{
"display": "Holland",
"url": "pavers/holland.html"
},
{
"display": "Old Munich",
"url": "pavers/oldmunich.html"
},
{
"display": "Strassen Classic",
"url": "pavers/strassen.html"
},
{
"display": "Strassen Bavaria (Tumbled)",
"url": "pavers/strassenbavaria.html"
},
{
"display": "Strassen Barvaria II (Non-tumbled)",
"url": "pavers/strassenbavariaii.html"
},
{
"display": "Vavel Stone (Tumbled)",
"url": "pavers/vavel.html"
},
{
"display": "Vavel Stone II (Non-tumbled)",
"url": "pavers/vavelii.html"
}
]
}
,
{
"name": "Circles",
"links": [
{
"url": "circles/bavaria.html",
"display": "Bavaria II Circle"
},
{
"url": "circles/cobble.html",
"display": "Cobble Circle"
},
{
"url": "circles/cracovia.html",
"display": "Cracovia Circle"
},
{
"url": "circles/strassenbarvaria.html",
"display": "Strassen Barvaria Circle"
},
{
"url": "circles/strassenclassic.html",
"display": "Strassen Classic Circle"
}
]
}
]
}
Düzenleme:
1) 03/25/16 - 18:00 CST butonuna tıklandığında konu menüsü artık görüntüler olduğunu. Yani belki de "$ ('nav # menu') .mmenu(); yanlış zamanda. Ancak, '.done' işlevinden çıkardığımda, menü gezginini herhangi bir içerik olmaksızın (html'de açıkça tanımlanmış olanın dışında) yükler. Tek bir JSON dosyasında daha fazla diziye ulaşmak için ilk çözümle aynı işlevselliği istiyorum.
2) 03/25/16 - 7:30 CST Komutta hata işleme eklendi. Sonuç döndürüldü: 1: "getJSON isteği başarısız! Parsererror" 2: "getJSON isteği sona erdi!"
3) 03/25/16 - 07:49 CST Yeniden biçimlendirilen JSON Bir '{' eksikti .. düzgün yorumlanmalıdır.
document.getElementById("id0"+xString).innerHTML = lis;
Güncel Hata olduğunda Şimdi bir hata alma: brukstone.html: 81 Yakalanmamış TypeError: ayarlanamaz özelliği 'innerHTML'
Ve çözümü ile sorun nedir? –
Sorun açıklamanızı düzenleyebilir misiniz? Tam olarak sorunun ne olduğunu tanımlamak için 1 kısa paragraf kullanın, örneğin, neyi başarmaya çalışıyorsunuz, ne tür verileri işlemek niyetindesiniz ve nihaî sonuç ne olacak? –
yolunda örnekleri koyun: soruya taşındı. –