How to get all properties values of a JavaScript Object (without knowing the keys)?

JavascriptJavascript Objects

Javascript Problem Overview


If there is a JavaScript object:

var objects={...};

Suppose, it has more than 50 properties, without knowing the property names (that's without knowing the 'keys') how to get each property value in a loop?

Javascript Solutions


Solution 1 - Javascript

Depending on which browsers you have to support, this can be done in a number of ways. The overwhelming majority of browsers in the wild support ECMAScript 5 (ES5), but be warned that many of the examples below use Object.keys, which is not available in IE < 9. See the compatibility table.

ECMAScript 3+

If you have to support older versions of IE, then this is the option for you:

for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
        var val = obj[key];
        // use val
    }
}

The nested if makes sure that you don't enumerate over properties in the prototype chain of the object (which is the behaviour you almost certainly want). You must use

Object.prototype.hasOwnProperty.call(obj, key) // ok

rather than

obj.hasOwnProperty(key) // bad

because ECMAScript 5+ allows you to create prototypeless objects with Object.create(null), and these objects will not have the hasOwnProperty method. Naughty code might also produce objects which override the hasOwnProperty method.

ECMAScript 5+

You can use these methods in any browser that supports ECMAScript 5 and above. These get values from an object and avoid enumerating over the prototype chain. Where obj is your object:

var keys = Object.keys(obj);

for (var i = 0; i < keys.length; i++) {
    var val = obj[keys[i]];
    // use val
}

If you want something a little more compact or you want to be careful with functions in loops, then Array.prototype.forEach is your friend:

Object.keys(obj).forEach(function (key) {
    var val = obj[key];
    // use val
});

The next method builds an array containing the values of an object. This is convenient for looping over.

var vals = Object.keys(obj).map(function (key) {
    return obj[key];
});

// use vals array

If you want to make those using Object.keys safe against null (as for-in is), then you can do Object.keys(obj || {})....

Object.keys returns enumerable properties. For iterating over simple objects, this is usually sufficient. If you have something with non-enumerable properties that you need to work with, you may use Object.getOwnPropertyNames in place of Object.keys.

ECMAScript 2015+ (A.K.A. ES6)

Arrays are easier to iterate with ECMAScript 2015. You can use this to your advantage when working with values one-by–one in a loop:

for (const key of Object.keys(obj)) {
    const val = obj[key];
    // use val
}

Using ECMAScript 2015 fat-arrow functions, mapping the object to an array of values becomes a one-liner:

const vals = Object.keys(obj).map(key => obj[key]);

// use vals array

ECMAScript 2015 introduces Symbol, instances of which may be used as property names. To get the symbols of an object to enumerate over, use Object.getOwnPropertySymbols (this function is why Symbol can't be used to make private properties). The new Reflect API from ECMAScript 2015 provides Reflect.ownKeys, which returns a list of property names (including non-enumerable ones) and symbols.

Array comprehensions (do not attempt to use)

Array comprehensions were removed from ECMAScript 6 before publication. Prior to their removal, a solution would have looked like:

const vals = [for (key of Object.keys(obj)) obj[key]];

// use vals array

ECMAScript 2017+

ECMAScript 2016 adds features which do not impact this subject. The ECMAScript 2017 specification adds Object.values and Object.entries. Both return arrays (which will be surprising to some given the analogy with Array.entries). Object.values can be used as is or with a for-of loop.

const values = Object.values(obj);

// use values array or:

for (const val of Object.values(obj)) {
    // use val
}

If you want to use both the key and the value, then Object.entries is for you. It produces an array filled with [key, value] pairs. You can use this as is, or (note also the ECMAScript 2015 destructuring assignment) in a for-of loop:

for (const [key, val] of Object.entries(obj)) {
    // use key and val
}

Object.values shim

Finally, as noted in the comments and by teh_senaus in another answer, it may be worth using one of these as a shim. Don't worry, the following does not change the prototype, it just adds a method to Object (which is much less dangerous). Using fat-arrow functions, this can be done in one line too:

Object.values = obj => Object.keys(obj).map(key => obj[key]);

which you can now use like

// ['one', 'two', 'three']
var values = Object.values({ a: 'one', b: 'two', c: 'three' });

If you want to avoid shimming when a native Object.values exists, then you can do:

Object.values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));

Finally...

Be aware of the browsers/versions you need to support. The above are correct where the methods or language features are implemented. For example, support for ECMAScript 2015 was switched off by default in V8 until recently, which powered browsers such as Chrome. Features from ECMAScript 2015 should be be avoided until the browsers you intend to support implement the features that you need. If you use babel to compile your code to ECMAScript 5, then you have access to all the features in this answer.

Solution 2 - Javascript

By using a simple for..in loop:

for(var key in objects) {
    var value = objects[key];
}

Solution 3 - Javascript

Here's a reusable function for getting the values into an array. It takes prototypes into account too.

Object.values = function (obj) {
    var vals = [];
    for( var key in obj ) {
        if ( obj.hasOwnProperty(key) ) {
            vals.push(obj[key]);
        }
    }
    return vals;
}

Solution 4 - Javascript

If you have access to Underscore.js, you can use the _.values function like this:

_.values({one : 1, two : 2, three : 3}); // return [1, 2, 3]

Solution 5 - Javascript

ES5 Object.keys

var a = { a: 1, b: 2, c: 3 };
Object.keys(a).map(function(key){ return a[key] });
// result: [1,2,3]

Solution 6 - Javascript

If you really want an array of Values, I find this cleaner than building an array with a for ... in loop.

ECMA 5.1+

function values(o) { return Object.keys(o).map(function(k){return o[k]}) }

It's worth noting that in most cases you don't really need an array of values, it will be faster to do this:

for(var k in o) something(o[k]);

This iterates over the keys of the Object o. In each iteration k is set to a key of o.

Solution 7 - Javascript

const myObj = { a:1, b:2, c:3 }

Get all values:

  • the shortest way:

    • const myValues = Object.values(myObj)
  • const myValues = Object.keys(myObj).map(key => myObj[key])

Solution 8 - Javascript

You can loop through the keys:

foo = {one:1, two:2, three:3};
for (key in foo){
    console.log("foo["+ key +"]="+ foo[key]);
}

will output:

foo[one]=1
foo[two]=2
foo[three]=3

Solution 9 - Javascript

ECMA2017 onwards:

Object.values(obj) will fetch you all the property values as an array.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

Solution 10 - Javascript

The question doesn't specify whether wanting inherited and non-enumerable properties also.

There is a question for getting everything, inherited properties and non-enumerable properties also, that Google cannot easily find.

If we are to get all inherited and non-enumerable properties, my solution for that is:

function getAllPropertyNames(obj) {
	let result = new Set();
	while (obj) {
		Object.getOwnPropertyNames(obj).forEach(p => result.add(p));
		obj = Object.getPrototypeOf(obj);
	}
	return [...result];
}

And then iterate over them, just use a for-of loop:

function getAllPropertyNames(obj) {
  let result = new Set();
  while (obj) {
    Object.getOwnPropertyNames(obj).forEach(p => result.add(p));
    obj = Object.getPrototypeOf(obj);
  }
  return [...result];
}

let obj = {
  abc: 123,
  xyz: 1.234,
  foobar: "hello"
};

for (p of getAllPropertyNames(obj)) console.log(p);

Solution 11 - Javascript

For those early adapting people on the CofeeScript era, here's another equivalent for it.

val for key,val of objects

Which may be better than this because the objects can be reduced to be typed again and decreased readability.

objects[key] for key of objects

Solution 12 - Javascript

Apparently - as I recently learned - this is the fastest way to do it:

var objs = {...};
var objKeys = Object.keys(obj);
for (var i = 0, objLen = objKeys.length; i < objLen; i++) {
    // do whatever in here
    var obj = objs[objKeys[i]];
}

Solution 13 - Javascript

use a polyfill like:

if(!Object.values){Object.values=obj=>Object.keys(obj).map(key=>obj[key])}

then use

Object.values(my_object)

3) profit!

Solution 14 - Javascript

I realize I'm a little late but here's a shim for the new firefox 47 Object.values method

Object.prototype.values = Object.prototype.values || function(obj) {
  return this.keys(obj).map(function(key){
    return obj[key];
  });
};

Solution 15 - Javascript

Object.entries do it in better way.

  var dataObject = {"a":{"title":"shop"}, "b":{"title":"home"}}
 
   Object.entries(dataObject).map(itemArray => { 
     console.log("key=", itemArray[0], "value=", itemArray[1])
  })

Solution 16 - Javascript

Use: Object.values(), we pass in an object as an argument and receive an array of the values as a return value.

This returns an array of a given object own enumerable property values. You will get the same values as by using the for in loop but without the properties on the Prototype. This example will probably make things clearer:

function person (name) {
  this.name = name;
}

person.prototype.age = 5;

let dude = new person('dude');

for(let prop in dude) {
  console.log(dude[prop]);     // for in still shows age because this is on the prototype
}                              // we can use hasOwnProperty but this is not very elegant

// ES6 + 
console.log(Object.values(dude));
// very concise and we don't show props on prototype

Solution 17 - Javascript

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed

Solution 18 - Javascript

Here's a function similar to PHP's array_values()

function array_values(input) {
  var output = [], key = '';
  for ( key in input ) { output[output.length] = input[key]; }
  return output;
}

Here's how to get the object's values if you're using ES6 or higher:

Array.from(values(obj));

Solution 19 - Javascript

Compatible with ES7 even some browsers do not support it yet

Since , Object.values(<object>) will be built-in in ES7 &

Until waiting all browsers to support it , you could wrap it inside a function :

Object.vals=(o)=>(Object.values)?Object.values(o):Object.keys(o).map((k)=>o[k])

Then :

Object.vals({lastname:'T',firstname:'A'})
 // ['T','A']
Once browsers become compatible with ES7, you will not have to change anything in your code.

Solution 20 - Javascript

I think the easiest option is like this-

Object.keys(data).forEach(function (key, index) {
  var value = data[key];  
  console.log(key,index, value);
});

For example, a runnable code is added in here-

const user = {
    name: 'Alex',
    age: 30
};

Object.keys(user).forEach(function (key, index) {
  var value = user[key];  
  console.log(key,index, value);
});

Solution 21 - Javascript

we can fetch data using three methods below

Use map function

data.map( item => { console.log(item) }

Use for loop

for( let i = 0; i < data.length; i++){
   console.log(item);
}

Use for in loop

for(key in data) {
    if(data.hasOwnProperty(key)) {
       const value = data[key];
       console.log(value);
    }
}

Solution 22 - Javascript

var objects={...}; this.getAllvalues = function () {
        var vls = [];
        for (var key in objects) {
            vls.push(objects[key]);
        }
        return vls;
    }

Solution 23 - Javascript

in ECMAScript5 use

 keys = Object.keys(object);

Otherwise if you're browser does not support it, use the well-known for..in loop

for (key in object) {
    // your code here
}

Solution 24 - Javascript

Now I use Dojo Toolkit because older browsers do not support Object.values.

require(['dojox/lang/functional/object'], function(Object) {
    var obj = { key1: '1', key2: '2', key3: '3' };
    var values = Object.values(obj);
    console.log(values);
});

Output :

['1', '2', '3']

Solution 25 - Javascript

use

console.log(variable)

and if you using google chrome open Console by using Ctrl+Shift+j

Goto >> Console

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMellonView Question on Stackoverflow
Solution 1 - JavascriptqubyteView Answer on Stackoverflow
Solution 2 - JavascriptTatu UlmanenView Answer on Stackoverflow
Solution 3 - Javascriptteh_senausView Answer on Stackoverflow
Solution 4 - JavascriptjichiView Answer on Stackoverflow
Solution 5 - JavascriptĐọc truyện hayView Answer on Stackoverflow
Solution 6 - JavascriptzzzView Answer on Stackoverflow
Solution 7 - JavascriptAnatoliy_ZView Answer on Stackoverflow
Solution 8 - JavascriptarieraView Answer on Stackoverflow
Solution 9 - Javascriptishandutta2007View Answer on Stackoverflow
Solution 10 - JavascriptnonopolarityView Answer on Stackoverflow
Solution 11 - JavascriptCh.IdeaView Answer on Stackoverflow
Solution 12 - JavascriptdylnmcView Answer on Stackoverflow
Solution 13 - Javascriptuser40521View Answer on Stackoverflow
Solution 14 - JavascriptJamieView Answer on Stackoverflow
Solution 15 - JavascriptMustkeem KView Answer on Stackoverflow
Solution 16 - JavascriptWillem van der VeenView Answer on Stackoverflow
Solution 17 - Javascriptpriya_21View Answer on Stackoverflow
Solution 18 - JavascriptjaggedsoftView Answer on Stackoverflow
Solution 19 - JavascriptAbdennour TOUMIView Answer on Stackoverflow
Solution 20 - JavascriptAbrar JahinView Answer on Stackoverflow
Solution 21 - JavascriptJishnu V SView Answer on Stackoverflow
Solution 22 - JavascriptSudarshanView Answer on Stackoverflow
Solution 23 - Javascriptuser278064View Answer on Stackoverflow
Solution 24 - JavascriptrioView Answer on Stackoverflow
Solution 25 - JavascriptPuneetView Answer on Stackoverflow