#javascript #html #json
#javascript #HTML #json
Вопрос:
У меня есть один объект JSON, который я передаю в функцию javascript, все из которых определены ниже. Проблема в том, что я получаю одно и то же имя папки, указанное в повторении на странице HTML.
Объект JSON:
{
"folderName": "arjunram-test",
"objects": [
{
"keyName": "ShadowBalanceMismatch_April.csv",
"keyValue": "ShadowBalanceMismatch_April.csv"
},
{
"keyName": "rawLogs.txt",
"keyValue": "rawLogs.txt"
},
{
"keyName": "expiredpoints.txt",
"keyValue": "expiredpoints.txt"
}
],
"childDirs": [
{
"folderName": "20140601.csv",
"objects": [
{
"keyName": "expiredpoints.txt",
"keyValue": "20140601.csv/expiredpoints.txt"
}
],
"childDirs": [
{
"folderName": "20140601-test",
"objects": [
{
"keyName": "CustomerID.txt",
"keyValue": "20140601.csv/20140601-test/CustomerID.txt"
}
],
"childDirs": []
},
{
"folderName": "test-folder",
"objects": [
{
"keyName": "Amazon_Points_proposal20110421_final.docx",
"keyValue": "20140601.csv/test-folder/Amazon_Points_proposal20110421_final.docx"
}
],
"childDirs": []
}
]
},
{
"folderName": "20140602.csv",
"objects": [
{
"keyName": "[Songs.PK] 01 - Ek Villain - Galliyan.mp3",
"keyValue": "20140602.csv/[Songs.PK] 01 - Ek Villain - Galliyan.mp3"
},
{
"keyName": "screen1.JPG",
"keyValue": "20140602.csv/screen1.JPG"
},
{
"keyName": "[Songs.PK] 05 - Ek Villain - Hamdard.mp3",
"keyValue": "20140602.csv/[Songs.PK] 05 - Ek Villain - Hamdard.mp3"
},
{
"keyName": "[Songs.PK] 06 - Ek Villain - Galliyan (Unplugged).mp3",
"keyValue": "20140602.csv/[Songs.PK] 06 - Ek Villain - Galliyan (Unplugged).mp3"
},
{
"keyName": "[Songs.PK] 04 - Ek Villain - Awari.mp3",
"keyValue": "20140602.csv/[Songs.PK] 04 - Ek Villain - Awari.mp3"
},
{
"keyName": "2.JPG",
"keyValue": "20140602.csv/2.JPG"
},
{
"keyName": "4-2.JPG",
"keyValue": "20140602.csv/4-2.JPG"
},
{
"keyName": "3.JPG",
"keyValue": "20140602.csv/3.JPG"
},
{
"keyName": "0.JPG",
"keyValue": "20140602.csv/0.JPG"
},
{
"keyName": "Form 2 Guide.pdf",
"keyValue": "20140602.csv/Form 2 Guide.pdf"
},
{
"keyName": "screen3.JPG",
"keyValue": "20140602.csv/screen3.JPG"
},
{
"keyName": "4-0-3.JPG",
"keyValue": "20140602.csv/4-0-3.JPG"
},
{
"keyName": "4-1-3.JPG",
"keyValue": "20140602.csv/4-1-3.JPG"
},
{
"keyName": "4-1-1.JPG",
"keyValue": "20140602.csv/4-1-1.JPG"
},
{
"keyName": "[Songs.PK] 02 - Ek Villain - Banjaara.mp3",
"keyValue": "20140602.csv/[Songs.PK] 02 - Ek Villain - Banjaara.mp3"
},
{
"keyName": "4-1.JPG",
"keyValue": "20140602.csv/4-1.JPG"
},
{
"keyName": "4-0-2.JPG",
"keyValue": "20140602.csv/4-0-2.JPG"
},
{
"keyName": "4-0-1.JPG",
"keyValue": "20140602.csv/4-0-1.JPG"
},
{
"keyName": "1.JPG",
"keyValue": "20140602.csv/1.JPG"
},
{
"keyName": "screen2.JPG",
"keyValue": "20140602.csv/screen2.JPG"
},
{
"keyName": "base.JPG",
"keyValue": "20140602.csv/base.JPG"
},
{
"keyName": "[Songs.PK] 03 - Ek Villain - Zaroorat.mp3",
"keyValue": "20140602.csv/[Songs.PK] 03 - Ek Villain - Zaroorat.mp3"
},
{
"keyName": "4-pending.JPG",
"keyValue": "20140602.csv/4-pending.JPG"
},
{
"keyName": "4-3.JPG",
"keyValue": "20140602.csv/4-3.JPG"
},
{
"keyName": "All.JPG",
"keyValue": "20140602.csv/All.JPG"
},
{
"keyName": "screen4.JPG",
"keyValue": "20140602.csv/screen4.JPG"
},
{
"keyName": "4-1-2.JPG",
"keyValue": "20140602.csv/4-1-2.JPG"
}
],
"childDirs": [
{
"folderName": "testing-paging",
"objects": [
{
"keyName": "0.JPG",
"keyValue": "20140602.csv/testing-paging/0.JPG"
},
{
"keyName": "4-pending.JPG",
"keyValue": "20140602.csv/testing-paging/4-pending.JPG"
},
{
"keyName": "4-1.JPG",
"keyValue": "20140602.csv/testing-paging/4-1.JPG"
},
{
"keyName": "4-3.JPG",
"keyValue": "20140602.csv/testing-paging/4-3.JPG"
},
{
"keyName": "4-0-3.JPG",
"keyValue": "20140602.csv/testing-paging/4-0-3.JPG"
},
{
"keyName": "4-0-2.JPG",
"keyValue": "20140602.csv/testing-paging/4-0-2.JPG"
},
{
"keyName": "4-0-1.JPG",
"keyValue": "20140602.csv/testing-paging/4-0-1.JPG"
},
{
"keyName": "1.JPG",
"keyValue": "20140602.csv/testing-paging/1.JPG"
},
{
"keyName": "4-1-3.JPG",
"keyValue": "20140602.csv/testing-paging/4-1-3.JPG"
},
{
"keyName": "4-1-1.JPG",
"keyValue": "20140602.csv/testing-paging/4-1-1.JPG"
},
{
"keyName": "2.JPG",
"keyValue": "20140602.csv/testing-paging/2.JPG"
},
{
"keyName": "4-2.JPG",
"keyValue": "20140602.csv/testing-paging/4-2.JPG"
},
{
"keyName": "3.JPG",
"keyValue": "20140602.csv/testing-paging/3.JPG"
},
{
"keyName": "4-1-2.JPG",
"keyValue": "20140602.csv/testing-paging/4-1-2.JPG"
}
],
"childDirs": []
}
]
},
{
"folderName": "test-repet",
"objects": [
{
"keyName": "4-pending.JPG",
"keyValue": "test-repet/4-pending.JPG"
}
],
"childDirs": []
}
]
}
HTML:
<div class="panel accordion clearfix" id="dispdir">
<script type="text/javascript">
window.onload = function() {
showDirectorySegment(${S3DirectoryList},"folder",null); <!-- ${S3DirectoryList} contains JSON Object as defined above
};
</script>
</div>
Javascript:
function showFolders( folderList ) {
console.log(folderList.length);
var markup = "";
for ( var i = 0; i < folderList.length; i ) {
var fid = "folder_" folderId;
markup = "<div class="well clearfix" style="background-color:#FFE88D;font-size:15px">";
markup = "<a style="text-decoration:none" id='" fid "'><i class="fa fa-folder"></i>amp;nbsp;amp;nbsp;" folderList[i].folderName "</a></div>";
$("#dispdir").append(markup);
$("#" fid).on("click",
(function(i){
return function(){
showDirectorySegment(folderList[i],"folder", fid);
};
})(i)
);
folderId = 1;
}
}
function showDirectorySegment( dirList, target, elemId ) {
var markup = "";
var pid;
markup = "<div class="clearfix">";
markup = showObjects(dirList.objects) "<br><br>";
document.getElementById("dispdir").innerHTML = markup;
showFolders(dirList.childDirs);
$("#dispdir").append("</div>");
if ( target == "folder" ) {
pid = "path_" pathId;
var pMarkup = "<a style="text-decoration:none" id='" pid "'>" dirList.folderName "amp;nbsp;/</a>";
$("#dirpath").append( pMarkup );
$("#" pid).on("click",function(){
showDirectorySegment(dirList, "path", pid);
});
pathId = 1;
} else if ( target == "path" ) {
$("#" elemId).nextAll().remove();
}
}
Ответ №1:
Это была глупая ошибка, которую каждый программист обязан совершить и имеет на нее право. Просто нужно было удалить знак ‘ ‘ из первого оператора разметки внутри цикла в функции getFolders