Array loop for Object.keys and its value

Question

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>');
    }
}

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. — Jake Haller-Roby
– Jake Haller-Roby, Commented Mar 8, 2016 at 7:26
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'] — Rajesh Dixit
– Rajesh Dixit, Commented Mar 8, 2016 at 7:34

vijayP · Accepted Answer · 2016-03-08 07:39:31Z

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>

answered Mar 8, 2016 at 7:39

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

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

1 Comment

John Paul Over a year ago

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

MrVaykadji · Accepted Answer · 2016-03-08 07:44:52Z

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;

edited Mar 8, 2016 at 7:44

answered Mar 8, 2016 at 7:38

MrVaykadji

4014 silver badges9 bronze badges

2 Comments

John Paul Over a year ago

what if i want to show the array values rather then length?

John Paul Over a year ago

'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)

user3821538 · Accepted Answer · 2016-03-08 07:35:07Z

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.

answered Mar 8, 2016 at 7:35

user3821538

1174 bronze badges

Comments

Rajesh Dixit · Accepted Answer · 2016-03-08 08:05:13Z

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>

Collectives™ on Stack Overflow

Array loop for Object.keys and its value

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related