Access the an objects keys and the index from an object in a for loop

If you want to use a for/in loop, there is no better way to write this. You have to keep your own loop variable to count the iterations.

You could use Object.keys to get an array of keys first and then access their index either by using a for loop or using forEach, but I wouldn't call this "better", it's just a different way to go about it:

var d = {KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"};

Object.keys(d).forEach(function(key, i) {
  console.log("d[\"key\"]: ", d[key]);
  console.log("i: ", i);
});

I don't know if I get your question correctly, but you can use Object.keys with forEach:

var d={KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"};

Object.keys(d).forEach(function(e, i){
  console.log("the key is: " + e + ", the value is: " + d[e] + ", the index is: " + i)
})

I have created some code that will print nicely what you are looking for. The trick is to use Object.keys because it passes the index for you. Here is a clean snippet of code that looks like it supports your use case:

var d = { KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"}

Object.keys(d).forEach(function (key, index) {
  if (index == 0) {
    console.log("  ",key,"        ",d[key])
    console.log("------------------------")
  } else {
    console.log( index + ". " + key + "          "+d[key]);
  }
});

// run then open console to view output

//    KpiName       KPI1
// ------------------------
// 1. 1/1/2016      85%
// 2. 1/2/2016      87%

I have provided a working example here: https://jsfiddle.net/h9yw48bz/

Please shoot me a +1 if you find this to be a helpful answer

There are so many options as below to achieve this as below.

Method 1:

If you target only the modern browsers and not an old IE you can use Object.keys as below:

var d = {KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"};
//var i = 0;
Object.keys(d).forEach(function(key, i){
   console.log('d["' + key + '"]: ' + d[key]); 
   console.log('index: ' + (i++).toString());
});

Method 2:

If you target old browsers as well, you can use the same one you did above with a minor change not to include any inherited object properties:

var d = {KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"};
var i = 0;
for(var key in d) {
  if(d.hasOwnProperty(key)){
    console.log('d["' + key + '"]: ' + d[key]); 
    console.log('index: ' + (i++).toString());
  }
}

Method 3:

Using Jquery

var d = {KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"};
var i = 0;
$.each(d, function(key, value) {
  console.log('d["' + key + '"]: ' + value); 
  console.log('index: ' + (i++).toString());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Method 4:

Using AngularJS

var d = {KpiName:"KPI1",  '1/1/2016':"85%",  '1/2/2016':"87%"};
    var i = 0;
    angular.forEach(d, function(value, key) {
      console.log('d["' + key + '"]: ' + value); 
      console.log('index: ' + (i++).toString());
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>