0

I am trying to show an array loop in which i have a date and its value. I am able to loop Objects.keys of an array but inner loop need to show the key array individualy. Its a task of simple arrays but i'm unable to figure it out. following is my code.

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>');
    }
}
Improve this question
4
  • 4
    As a quick note, you desperately need to do away with those variable names. Variables should always be intelligible to a person reading your code (including yourself) so ab should be named objectLength and bc should be named firstIndexLength, etc. Commented Mar 8, 2016 at 7:26
  • 3
    what is your required output? Commented Mar 8, 2016 at 7:27
  • What is purpose of nested for loops ? Commented Mar 8, 2016 at 7:29
  • 1
    Note: Its a bad practice to append in loop. Also Object.keys(arr)[b] this will always give you 10. Its length of 2016-03-06 and not ['1', '2','3','4','5'] Commented Mar 8, 2016 at 7:34

4 Answers 4

Reset to default
2

I believe you are looking for such output:

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

yes. simple and easy.. yes i was looking for this result
0

Eveyrthing becomes clear when you name things:

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])
    }
}

Where:

  • arr.length is the entire object length;
  • arr[date] is the entire array;
  • arr[date].length is the length of the array;
  • date is the label of object;
  • arr[date][hour] is a value from your arrays;
Improve this answer

2 Comments

what if i want to show the array values rather then length?
'2016-03-06' : ['1', '2','3','4','5'] it gives the counter of array i want to show 1, 2, 3, 4, 5 (this is the value) not 0,1,2,3,4 (this is the length)
0 
for(b=0; b < Object.keys(arr).length; b++){
        $('.result .array').append('<li data-date='+ Object.keys(arr)[a]  +'>1</li>');
    }

right here, Object.keys(arr)[a], this needs to be Object.keys(arr)[b].

You are using the a increment twice instead of a and b both once.

Improve this answer

Comments

0

You can use Array.forEach to loop over Keys or currentItem.

Also as I have already mentioned, its a bad practice to append element in a loop. You should instead create a html string and perform bulk operation.

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.