Why cant I iterate over this JavaScript object?

Question

I have this javascript object..

var obj = {
    '02/08/2016': 2,
    '03/10/2016': 4,
    '04/05/2016': 2,
    '04/06/2016': 35,
    '04/19/2016': 4,
    '04/26/2016': 22,
    '05/09/2016': 15,
    '05/24/2016': 2,
    '05/30/2016': 4,
    '07/14/2016': 7,
    '08/18/2016': 200
};

// Does not work
$(obj).each(function(index,value) {
  console.log(index);
  console.log(value);
});

// Does not work, also what does putting it in bracket notation do here?
var labels = $.map(obj, function(index, value) { 
   return [index];  
});

Why can I not iterate the object? I am trying to place this data in two separate arrays (like below) for chart.js

var arr1 = ['02/08/2016', '03/10/2016', '04/05/2016', ..];
var arr2 = [2, 4, 2, ...];

Code Fiddle: https://jsfiddle.net/zjgb6ez4/

Possible duplicate of [How do I loop through or enumerate a JavaScript object?](http://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) — 4castle, Jan 05 '17 at 00:56
If you want to use jQuery, your code should be [`$.each(obj, callback)`](http://api.jquery.com/jquery.each/#jQuery-each-object-callback) — 4castle, Jan 05 '17 at 01:00
@4castle How does that differ from $(obj).each? Arent both jQuery? — NightOwl4Life, Jan 05 '17 at 01:00
@NightOwl4Life: Didn't you just cite the jQuery docs about this in another comment? — Felix Kling, Jan 05 '17 at 01:01
Why do you have an object instead of an array? That seems like the logical structure to use here. — DavidG, Jan 05 '17 at 01:02
@NightOwl4Life You can't keep changing your question - just stick with the original please and if you have a follow up, ask another question. — DavidG, Jan 05 '17 at 01:09

Praveen Kumar Purushothaman · Accepted Answer · 2017-01-05T01:08:22.200

3

The issue with your logic is, $.each() has two signatures:

$(selector).each(function(index,value) {...} // For HTML DOM selectors.
$.each(obj, function(index,value) {...}      // For JavaScript Objects & Arrays.

What you have used is for jQuery selectors, DOM Iteration. This way is specifically for iterating JavaScript Objects or Arrays.

Also, since you need two arrays. You can't use each or map function for this, as they return only one array. Instead, it is better to use Object.keys and Object.values():

var obj = {
    '02/08/2016': 2,
    '03/10/2016': 4,
    '04/05/2016': 2,
    '04/06/2016': 35,
    '04/19/2016': 4,
    '04/26/2016': 22,
    '05/09/2016': 15,
    '05/24/2016': 2,
    '05/30/2016': 4,
    '07/14/2016': 7,
    '08/18/2016': 200
};
var arr1 = Object.keys(obj);
var arr2 = Object.values(obj);
console.log(arr1);
console.log(arr2);

Note: Object.values() is an experimental technology. Because this technology's specification has not stabilised, check the compatibility table for usage in various browsers. Also note that the syntax and behaviour of an experimental technology is subject to change in future versions of browsers as the specification changes.

Without Object.values()

var obj = {
    '02/08/2016': 2,
    '03/10/2016': 4,
    '04/05/2016': 2,
    '04/06/2016': 35,
    '04/19/2016': 4,
    '04/26/2016': 22,
    '05/09/2016': 15,
    '05/24/2016': 2,
    '05/30/2016': 4,
    '07/14/2016': 7,
    '08/18/2016': 200
};
var arr1 = Object.keys(obj);
var arr2 = arr1.map(function (v) {
  return obj[v];
});
console.log(arr1);
console.log(arr2);

edited Jan 05 '17 at 01:08

answered Jan 05 '17 at 00:57

Praveen Kumar Purushothaman

164,888
24
203
252

how come I cannot? From the JQuery Doc's "The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object." – NightOwl4Life Jan 05 '17 at 00:58
@NightOwl4Life Run the above snippet and tell me if it works? – Praveen Kumar Purushothaman Jan 05 '17 at 00:58
@NightOwl4Life You are right, but there are better ways of doing it. You really can't do with `map` function at least. Sorry to be unclear. – Praveen Kumar Purushothaman Jan 05 '17 at 00:59
Yes! Thank you, how does this work exactly? Not a problem, this has been a frustrating learning experience and I have encountered it quite a few times. – NightOwl4Life Jan 05 '17 at 00:59
2

@NightOwl4Life `Object.keys()` is a native function that gives you the keys as array. `Object.values()` is a native function that gives you the values as array. – Praveen Kumar Purushothaman Jan 05 '17 at 00:59
@NightOwl4Life What you have used is for jQuery selectors, DOM Iteration. This way is specifically for iterating JavaScript Objects or Arrays. – Praveen Kumar Purushothaman Jan 05 '17 at 01:01
@NightOwl4Life Also, it is better to do in the right way unless you need to use `$.each()` as a requirement. Internally, `$.each` runs both `Object.keys()` and `Object.values()` to get your iterate over this. – Praveen Kumar Purushothaman Jan 05 '17 at 01:01
You might want to add that `Object.values()` is not officially released yet and that not all browsers support it. – Felix Kling Jan 05 '17 at 01:02
@FelixKling How does it look now? – Praveen Kumar Purushothaman Jan 05 '17 at 01:05
@PraveenKumar yes – NightOwl4Life Jan 05 '17 at 01:07
1

@NightOwl4Life Added another snippet, that gives you the better compatible version. Have a look please. – Praveen Kumar Purushothaman Jan 05 '17 at 01:08
@NightOwl4Life Should I answer the secondary question or is it clear? – Praveen Kumar Purushothaman Jan 05 '17 at 01:11

David Jones · Answer 2 · 2017-01-05T01:03:21.960

3

Using jQuery to iterate over a plain object you need to use $.each().

$.each(obj, function(index,value) {...}

A pure Javascript solution might be:

for (var index in obj) {
    console.log(index);
    console.log(obj[index]);
}

edited Jan 05 '17 at 01:03

answered Jan 05 '17 at 00:58

David Jones

2,879
2
18
23

Does this differ from $(obj).each(function(index,value)? – NightOwl4Life Jan 05 '17 at 01:00
2

@NightOwl4Life What you have used is for jQuery selectors, DOM Iteration. This way is specifically for iterating JavaScript Objects or Arrays. – Praveen Kumar Purushothaman Jan 05 '17 at 01:00
@NightOwl4Life you dont need the selector - you already have the data you need – hackerrdave Jan 05 '17 at 01:00
@NightOwl4Life, yes, this is the right answer. Two each() methods: https://api.jquery.com/each/ and: http://api.jquery.com/jquery.each/ – sinisake Jan 05 '17 at 01:00
1

@PraveenKumar That completely clears it up. Thank you very much. – NightOwl4Life Jan 05 '17 at 01:01

Tome Pejoski · Answer 3 · 2017-01-05T01:09:42.477

1

You can use the keys() and values() methods on Object.

var obj = {
    '02/08/2016': 2,
    '03/10/2016': 4,
    '04/05/2016': 2,
    '04/06/2016': 35,
    '04/19/2016': 4,
    '04/26/2016': 22,
    '05/09/2016': 15,
    '05/24/2016': 2,
    '05/30/2016': 4,
    '07/14/2016': 7,
    '08/18/2016': 200
};
var arr1 = Object.keys(obj);
var arr2 = Object.values(obj);

This is plain JavaScript solution, without jQuery. But note that values() method is not supported in all browsers yet.

edited Jan 05 '17 at 01:09

answered Jan 05 '17 at 00:56

Tome Pejoski

1,582
2
10
34

I had no idea those methods existed, unfortunately I still get [0] and [object]. – NightOwl4Life Jan 05 '17 at 00:57
@NightOwl4Life fixed it. – Tome Pejoski Jan 05 '17 at 00:57
@NightOwl4Life I updated my answer, please recheck. By the way this pure JavaScript, without jQuery. – Tome Pejoski Jan 05 '17 at 01:01
1

You might want to add that `Object.values()` is not officially released yet and that not all browsers support it. – Felix Kling Jan 05 '17 at 01:02

Why cant I iterate over this JavaScript object?

3 Answers3