Object.keys及其值的數組循環

Question

我試圖顯示一個數組循環，其中我有一個日期及其值。 我能夠循環一個數組的Objects.keys，但是內部循環需要單獨顯示鍵數組。 它是一個簡單數組的任務，但我無法弄清楚。 以下是我的代碼。

var arr = {
    '2016-03-06' : ['1', '2','3','4','5'],          // 6th march 2016
    '2016-03-07' : ['6','7','8','9','10','11'],     // 7th march 2016
    '2016-03-08' : ['2','3','4','5'],           // 8th march 2016
    '2016-03-09' : ['6','7','8','9','10','11'],     // 9th march 2016
    '2016-03-10' : ['1', '2','3'],          // 10th march 2016
    '2016-03-11' : ['6','7','8','9','10','11'],     // 11th march 2016
};

var a=0;
var b=0;
ab = Object.keys(arr).length;
bc = Object.keys(arr)[b].length;
console.log(ab);
console.log(bc);

for(a=0; a < ab; a++){
    $('.result .array').append('<li data-date="'+Object.keys(arr)[a]+'">'+ Object.keys(arr)[a] + '</li>');
    for(b=0; b < Object.keys(arr).length; b++){
        $('.result .array').append('<li data-date='+ Object.keys(arr)[a]  +'>1</li>');
    }
}

Answer 1

我相信您正在尋找這樣的輸出：

 var arr = { '2016-03-06' : ['1', '2','3','4','5'], // 6th march 2016 '2016-03-07' : ['6','7','8','9','10','11'], // 7th march 2016 '2016-03-08' : ['2','3','4','5'], // 8th march 2016 '2016-03-09' : ['6','7','8','9','10','11'], // 9th march 2016 '2016-03-10' : ['1', '2','3'], // 10th march 2016 '2016-03-11' : ['6','7','8','9','10','11'], // 11th march 2016 }; for (var key in arr) { $('.result .array').append('<li data-date="'+key+'">'+ key + '</li>'); var associatedData = arr[key]; if($.isArray(associatedData)){ for (var i = 0; i < associatedData.length; i++) { $('.result .array').append('<li data-date='+ associatedData[i] +'>'+associatedData[i]+'</li>'); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="result"> <div class="array"> </div> </div> 

Answer 2

for(b=0; b < Object.keys(arr).length; b++){
        $('.result .array').append('<li data-date='+ Object.keys(arr)[a]  +'>1</li>');
    }

就在這里， Object.keys(arr)[a] ，它必須是Object.keys(arr)[b].

您正在使用兩次增量，而不是一次使用a和b。

Answer 3

當您命名事物時，一切都會變得清晰起來：

var arr = {
    '2016-03-06' : ['1', '2','3','4','5'],          // 6th march 2016
    '2016-03-07' : ['6','7','8','9','10','11'],     // 7th march 2016
    '2016-03-08' : ['2','3','4','5'],           // 8th march 2016
    '2016-03-09' : ['6','7','8','9','10','11'],     // 9th march 2016
    '2016-03-10' : ['1', '2','3'],          // 10th march 2016
    '2016-03-11' : ['6','7','8','9','10','11'],     // 11th march 2016
};

for (var date in arr) {
    console.log('there are %s hours in %s:', arr[date].length, date);
    for (var hour in arr[date]) {
        console.log('- %s', arr[date][hour])
    }
}

哪里：

• arr.length是整個對象的長度；
• arr[date]是整個數組；
• arr[date].length是數組的長度；
• date是對象的標簽；
• arr[date][hour]是數組中的值；

Answer 4

您可以使用Array.forEach遍歷Keys或currentItem 。

同樣正如我已經提到的，在循環中附加元素是一種不好的做法。 相反，您應該創建一個html字符串並執行批量操作。

 var arr = { '2016-03-06' : ['1', '2','3','4','5'], // 6th march 2016 '2016-03-07' : ['6','7','8','9','10','11'], // 7th march 2016 '2016-03-08' : ['2','3','4','5'], // 8th march 2016 '2016-03-09' : ['6','7','8','9','10','11'], // 9th march 2016 '2016-03-10' : ['1', '2','3'], // 10th march 2016 '2016-03-11' : ['6','7','8','9','10','11'], // 11th march 2016 }; var html = ""; for (var k in arr){ html+= '<li data-date="'+k+'">'+ k + '</li>'; if(Array.isArray(arr[k])){ arr[k].forEach(function(item){ html += '<li data-date="'+item+'">'+ item + '</li>'; }); } }; $('.result .array').append(html) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="result"> <div class="array"> </div> </div>