Develop Reference

Creating javascript variables from JSON [duplicate]

I have an object in JavaScript:
{
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
}
I want to use a for loop to get its properties. And I want to iterate it in parts (not all object properties at once).
With a simple array I can do it with a standard for loop:
for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last
But how to do it with objects?

For iterating on keys of Arrays, Strings, or Objects, use for .. in :
for (let key in yourobject) {
console.log(key, yourobject[key]);
}
With ES6, if you need both keys and values simultaneously, do
for (let [key, value] of Object.entries(yourobject)) {
console.log(key, value);
}
To avoid logging inherited properties, check with hasOwnProperty :
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) {
console.log(key, yourobject[key]);
}
}
You don't need to check hasOwnProperty when iterating on keys if you're using a simple object (for example one you made yourself with {}).
This MDN documentation explains more generally how to deal with objects and their properties.
If you want to do it "in chunks", the best is to extract the keys in an array. As the order isn't guaranteed, this is the proper way. In modern browsers, you can use
let keys = Object.keys(yourobject);
To be more compatible, you'd better do this :
let keys = [];
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) keys.push(key);
}
Then you can iterate on your properties by index: yourobject[keys[i]] :
for (let i=300; i < keys.length && i < 600; i++) {
console.log(keys[i], yourobject[keys[i]]);
}

Here is another iteration solution for modern browsers:
Object.keys(obj)
.filter((k, i) => i >= 100 && i < 300)
.forEach(k => console.log(obj[k]));
Or without the filter function:
Object.keys(obj).forEach((k, i) => {
if (i >= 100 && i < 300) {
console.log(obj[k]);
}
});
However you must consider that properties in JavaScript object are not sorted, i.e. have no order.

Using Object.entries you do something like this.
// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]
The Object.entries() method returns an array of a given object's own enumerable property [key, value]
So you can iterate over the Object and have key and value for each of the object and get something like this.
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
const key = obj[0];
const value = obj[1];
// do whatever you want with those values.
});
or like this
// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
For a reference have a look at the MDN docs for Object Entries

With the new ES6/ES2015 features, you don't have to use an object anymore to iterate over a hash. You can use a Map. Javascript Maps keep keys in insertion order, meaning you can iterate over them without having to check the hasOwnProperty, which was always really a hack.
Iterate over a map:
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
for (var key of myMap.keys()) {
console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"
for (var value of myMap.values()) {
console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
or use forEach:
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

If you want the key and value when iterating, you can use a for...of loop with Object.entries.
const myObj = {a: 1, b: 2}
for (let [key, value] of Object.entries(myObj)) {
console.log(`key=${key} value=${value}`)
}
// output:
// key=a value=1
// key=b value=2

The only reliable way to do this would be to save your object data to 2 arrays, one of keys, and one for the data:
var keys = [];
var data = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
}
}
You can then iterate over the arrays like you normally would:
for(var i = 0; i < 100; i++){
console.log(keys[i], data[i]);
//or
console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
console.log(keys[i], data[i]);
}
I am not using Object.keys(obj), because that's IE 9+.

->if we iterate over a JavaScript object using and find key of array of
objects
Object.keys(Array).forEach(key => {
console.log('key',key)
})

If you have a simple object you can iterate through it using the following code:
let myObj = {
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
};
let objKeys = Object.keys(myObj);
//Now we can use objKeys to iterate over myObj
for (item of objKeys) {
//this will print out the keys
console.log('key:', item);
//this will print out the values
console.log('value:', myObj[item]);
}
If you have a nested object you can iterate through it using the following code:
let b = {
one: {
a: 1,
b: 2,
c: 3
},
two: {
a: 4,
b: 5,
c: 6
},
three: {
a: 7,
b: 8,
c: 9
}
};
let myKeys = Object.keys(b);
for (item of myKeys) {
//print the key
console.log('Key', item)
//print the value (which will be another object)
console.log('Value', b[item])
//print the nested value
console.log('Nested value', b[item]['a'])
}
If you have array of objects you can iterate through it using the following code:
let c = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
];
for(item of c){
//print the whole object individually
console.log('object', item);
//print the value inside the object
console.log('value', item['a']);
}

const o = {
name: "Max",
location: "London"
};
for (const [key, value] of Object.entries(o)) {
console.log(`${key}: ${value}`);
}
Try online

Define object in arguments and avoid selectors & subscripts
There are a number of syntax choices but this one defines the object upfront in the closure's arguments which eliminates the need for selectors or subscripts in the iterator. k is key, v is value, i is index.
const obj = {
kiwi: true,
mango: false,
pineapple: 500
};
Object.entries(obj).forEach(([k, v], i) => {
console.log(k, v, i);
});
// kiwi true 0
// mango false 1
// pineapple 500 2

If you wanted to iterate the whole object at once you could use for in loop:
for (var i in obj) {
...
}
But if you want to divide the object into parts in fact you cannot. There's no guarantee that properties in the object are in any specified order. Therefore, I can think of two solutions.
First of them is to "remove" already read properties:
var i = 0;
for (var key in obj) {
console.log(obj[key]);
delete obj[key];
if ( ++i > 300) break;
}
Another solution I can think of is to use Array of Arrays instead of the object:
var obj = [['key1', 'value1'], ['key2', 'value2']];
Then, standard for loop will work.

I finally came up with a handy utility function with a unified interface to iterate Objects, Strings, Arrays, TypedArrays, Maps, Sets, (any Iterables).
const iterate = require('#a-z/iterate-it');
const obj = { a: 1, b: 2, c: 3 };
iterate(obj, (value, key) => console.log(key, value));
// a 1
// b 2
// c 3
https://github.com/alrik/iterate-javascript

Really a PITA this is not part of standard Javascript.
/**
* Iterates the keys and values of an object. Object.keys is used to extract the keys.
* #param object The object to iterate
* #param fn (value,key)=>{}
*/
function objectForEach(object, fn) {
Object.keys(object).forEach(key => {
fn(object[key],key, object)
})
}
Note: I switched the callback parameters to (value,key) and added a third object to make the API consistent other APIs.
Use it like this
const o = {a:1, b:true};
objectForEach(o, (value, key, obj)=>{
// do something
});

For object iteration we usually use a for..in loop. This structure will loop through all enumerable properties, including ones who are inherited via prototypal inheritance. For example:
let obj = {
prop1: '1',
prop2: '2'
}
for(let el in obj) {
console.log(el);
console.log(obj[el]);
}
However, for..in will loop over all enumerable elements and this will not able us to split the iteration in chunks. To achieve this we can use the built in Object.keys() function to retrieve all the keys of an object in an array. We then can split up the iteration into multiple for loops and access the properties using the keys array. For example:
let obj = {
prop1: '1',
prop2: '2',
prop3: '3',
prop4: '4',
};
const keys = Object.keys(obj);
console.log(keys);
for (let i = 0; i < 2; i++) {
console.log(obj[keys[i]]);
}
for (let i = 2; i < 4; i++) {
console.log(obj[keys[i]]);
}

Yes. You can loop through an object using for loop. Here is an example
var myObj = {
abc: 'ABC',
bca: 'BCA',
zzz: 'ZZZ',
xxx: 'XXX',
ccc: 'CCC',
}
var k = Object.keys (myObj);
for (var i = 0; i < k.length; i++) {
console.log (k[i] + ": " + myObj[k[i]]);
}
NOTE: the example mentioned above will only work in IE9+. See Objec.keys browser support here.

Here is a Hand Made Solution:
function iterationForObject() {
let base = 0,
Keys= Object.keys(this);
return {
next: () => {
return {
value: {
"key": Keys[base],
"value": this[Keys[base]]
},
done: !(base++ < Keys.length)
};
}
};
}
Object.prototype[Symbol.iterator] = iterationForObject;
And Then You Can Loop Any Object:
for ( let keyAndValuePair of (Object Here) ) {
console.log(`${keyAndValuePair.key} => ${keyAndValuePair.value}`);
}

<script type="text/javascript">
// method 1
var images = {};
images['name'] = {};
images['family'] = {};
images[1] = {};
images['name'][5] = "Mehdi";
images['family'][8] = "Mohammadpour";
images['family']['ok'] = 123456;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][23] = 2602;
for (const [key1, value1] of Object.entries(images)){
for (const [key2, value2] of Object.entries(value1)){
console.log(`${key1} => ${key2}: ${value2}`);
}
}
console.log("=============================");
// method 2
var arr = [];
for(var x = 0; x < 5; x++){
arr[x] = [];
for(var y = 0; y < 5; y++){
arr[x][y] = x*y;
}
}
for(var i = 0; i < arr.length; i++) {
var cube = arr[i];
for(var j = 0; j < cube.length; j++) {
console.log("cube[" + i + "][" + j + "] = " + cube[j]);
}
}
</script>

var Dictionary = {
If: {
you: {
can: '',
make: ''
},
sense: ''
},
of: {
the: {
sentence: {
it: '',
worked: ''
}
}
}
};
function Iterate(obj) {
for (prop in obj) {
if (obj.hasOwnProperty(prop) && isNaN(prop)) {
console.log(prop + ': ' + obj[prop]);
Iterate(obj[prop]);
}
}
}
Iterate(Dictionary);

You can try using lodash- A modern JavaScript utility library delivering modularity, performance & extras js to fast object iterate:-
var  users  =   {
'fred':     { 
'user':   'fred',
    'age':  40 
},
'pebbles':  { 
'user':   'pebbles',
 'age':  1 
}
}; 
_.mapValues(users,  function(o)  { 
return  o.age; 
});
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
// The `_.property` iteratee shorthand.
console.log(_.mapValues(users,  'age')); // returns age property & value
console.log(_.mapValues(users,  'user')); // returns user property & value
console.log(_.mapValues(users)); // returns all objects
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.js"></script>

Find highest recurring duplicates in a javascript array

I have an array with several names like :
[mike,bob,john,john,rick,bob]
Can someone please tell me how is the most efficient way to find which name has been repeated the most?

Generate an object with count using Array#reduce method, later sort the property name array(get using Object.keys method) based on the count using Array#sort method and finally get the first element.
var arr = ['mike', 'bob', 'john', 'john', 'rick', 'bob'];
// generate an object which holds the count
var obj = arr.reduce(function(o, v) {
// define the property if not defined
o[v] = o[v] || 0;
// increment the count
o[v]++;
// return the object reference
return o;
// set initial value as an empty object
}, {});
// sort based on the count, descending order
// and get first
console.log(
Object.keys(obj).sort(function(a, b) {
return obj[b] - obj[a];
})[0]
)
// or using reduce, reduce into a single value
// which holds the highest value
console.log(
Object.keys(obj).reduce(function(a, b) {
return obj[b] > obj[a] ? b : a;
})
)

The standard solution to find duplicates (in O(n) time) is to walk linearly through the list and add each item to a set. Each time, before doing so, check if it is already in the set. If it is, you've found a duplicate.
names = [ 'mike', 'bob', 'john', 'john', 'rick', 'bob'];
seen = new Set();
names.forEach(function(item, index, array) {
if (seen.has(item)) {
console.log(item + " is a duplicate");
} else {
seen.add(item);
}
});
Alternately, you can sort in O(n log(n)) time, and save the extra space that was used above, by sorting and checking pair-wise as you iterate over the array:
names = [ 'mike', 'bob', 'john', 'john', 'rick', 'bob'];
names.sort().forEach(function(item, index, array) {
if ((index > 0) && (array[index - 1] == item)) {
console.log(item + " is a duplicate");
}
});

function findDup(arr){
var obj={};
for(var i of arr){
if(obj[i]==1){
console.log(i);
}
obj[i]=1;
}
}
findDup([ 'mike', 'bob', 'john', 'john', 'rick', 'bob']);

You could find with the help of map as follows
function findDuplicates() {
var name, names = ['mike', 'bob', 'john', 'john', 'rick', 'bob'];
var map = new Map();
var max = 1;
var maxRecurringString = "";
for(name of names) {
if(map.get(name) === undefined) {
map.set(name, 1);
} else {
var count = map.get(name);
count = count+1;
map.set(name, count);
if(max < count) {
max = count;
maxRecurringString = name;
}
}
}
console.log("Maximum recurring string is ", maxRecurringString, ". Max number of times :" + max);
}
findDuplicates();
This snippet prints the first string which appears maximum number of times. Say for example in the above example bob and john has appeared twice. If you want all the strings to be printed which has appeared maximum number of times you can iterate for the map whose count is the max count to print all the strings.

If you're looking for the most efficient way to do this, talking about performance, the best way is to loop over the array only once.
Array#reduce, Array#sort, Array#forEach will loop over the entire array, so if you're concerned about performance (specially working with considerable amount of data), avoiding those is the best practice
var findHighestRecurring = function(arr) {
arr.sort();
var i = arr.length;
var max = { item:"", count: 0 };
var last = { item:"", count: 0 };
var validate = function() {
if (last.count > max.count) {
max.item = last.item;
max.count = last.count;
}
}
while (i--) {
var curr = arr[i];
if (last.item !== curr) {
validate();
last.item = curr;
last.count = 0;
}
last.count++;
}
validate();
return max;
}
var sample = ["mike","bob","john","bob","john","rick","bob"];
var result = findHighestRecurring(sample);
console.log(result);

Get key and value of a JavaScript array into variable

I have a JavaScript object array. When write console.log(myarry) it will show in the console in the below form.
Array[2]
0: Object
one: "one"
1: Object
two: "two"
length: 2
In this array my key and value are same and am trying to get the key or value to a variable and print it. When am trying the below code it showing:
object object
for (var key in myarry) {
alert("Key is " + key + ", value is" + myarry[key]);
}

check this snippet
var obj = [{
"1": "one"
}, {
"2": "two"
}]
obj.forEach(function(item) {
Object.keys(item).forEach(function(key) {
console.log("key:" + key + "value:" + item[key]);
});
});
Hope it helps

Use for-loop instead of for-in to iterate array.
Use Object.keys to get keys of object
var arr = [{
one: 'one'
}, {
two: 'two'
}];
for (var i = 0, l = arr.length; i < l; i++) {
var keys = Object.keys(arr[i]);
for (var j = 0, k = keys.length; j < k; j++) {
console.log("Key:" + keys[j] + " Value:" + arr[i][keys[j]]);
}
}

I think you have two main options to get keys of an object using Object.keys these are: forEach; or a simple for.
1. Use forEach
If you're using an environment that supports the Array features of ES5 (directly or using a shim), you can use the new forEach:
var myarray = [{one: 'one'}, {two: 'two'}];
myarray.forEach(function(item) {
var items = Object.keys(item);
items.forEach(function(key) {
console.log('this is a key-> ' + key + ' & this is its value-> ' + item[key]);
});
});
forEach accepts an iterator function and, optionally, a value to use as this when calling that iterator function (not used above). The iterator function is called for each entry in the array, in order, skipping non-existent entries in sparse arrays. Although
forEach has the benefit that you don't have to declare indexing and value variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.
If you're worried about the runtime cost of making a function call for each array entry, don't be; technical details.
2. Use a simple for
Sometimes the old ways are the best:
var myarray = [{one: 'one'}, {two: 'two'}];
for (var i = 0, l = myarray.length; i < l; i++) {
var items = myarray[i];
var keys = Object.keys(items);
for (var j = 0, k = keys.length; j < k; j++) {
console.log('this is a key-> ' + keys[j] + ' & this is its value-> ' + items[keys[j]]);
}
}

Depending on your construction, you can do
const arr = [{ key1: 'val1' }, { key2: 'val2' }]
arr.forEach((a, i) =>
console.log(i, [{ key: Object.keys(a) }, { val: Object.values(a) }])
)
and to answer your question
arr.forEach((a, i) =>
alert("Key is "+ Object.keys(a) + ", value is " + Object.values(a))
)

am trying to get the key or value to a variable and print it.
then you could
var myarry = [{ one: 'one' }, { two: 'two' }];
for (var key in myarry) {
var value = myarry[key];
console.log(key, value)
}

you can do it in this way
const a = [{ one: 'one' }, { two: 'two' }];
a.forEach(function(value,key) {
console.log(value,key);
});
You can take key and value in a variable and use them.

Here's an interesting way to do it.
const arr = [{ one: 'one' }, { two: 'two' }];
Object.entries(arr).forEach(([_, obj]) => {
const key = Object.keys(obj)[0];
console.log(`Key is ${key}, value is ${obj[key]}.`);
});

Merge array of javascript objects by property key

First of all: I already found this thread, which basically is exactly what I want, but I tried my best to apply it to my needs - I couldn't.
So, I have the following javascript function:
function loadRelationData(object) {
var result = [];
var parents = []
parents = getParentObjectsByObjectID(object['ObjectID']);
var tmpFirstObjects = [];
var tmpOtherObjects = [];
$.each(parents, function (_, parent) {
var keyName = 'Übergeordnete ' + parent['ObjectType'];
var pushObject = {};
if (parent['ObjectType'] == object['ObjectType']) {
pushObject['Fieldname'] = keyName;
pushObject['Value'] = parent['Name'];
tmpFirstObjects.push(pushObject);
} else {
pushObject['Fieldname'] = keyName;
pushObject['Value'] = parent['Name'];
tmpOtherObjects.push(pushObject);
}
});
result = result.concat(tmpFirstObjects).concat(tmpOtherObjects);
return result;
}
The parents array looks like this
And my function creates this result
This might be a bit complicated, but I need to split it up like this, because I need the order.
What I want is an array with both "TEC_MapLocations" joined together like this:
[
{Fieldname: 'Übergeordnete TEC_Equipment', Value: 'E0192'},
{Fieldname: 'Übergeordnete TEC_MapLocation', Value: ['M100', 'M200']},
{Fieldname: 'Übergeordnete TEC_FunctionalLocation', Value: 'FL456'}
]
Any ideas on how to alter my code to achieve the desired result right away or how to merge the results array?
edit: I used Joseph's solution and used the following (quick and dirty) sort function to get back my desired sorting:
output.sort(function (a, b) {
if (a.ObjectType == object.ObjectType) {
return -1
} else {
return 1
}
});

What you'd want to do first is build a hash with Fieldname as key, and an array as value. Then you'd want to use reduce to add the values into the hash and array. Then you can transform it into an array using Object.keys and map.
var input = [
{Name: 'M100', ObjectID: 1, ObjectType: 'TEC_MapLocation'},
{Name: 'M200', ObjectID: 2, ObjectType: 'TEC_MapLocation'},
{Name: 'FL456', ObjectID: 4, ObjectType: 'TEC_FunctionalLocation'},
{Name: 'E0192', ObjectID: 5, ObjectType: 'TEC_Equipment'}
];
var hash = input.reduce(function(carry, item){
// Create the name
var name = 'Übergeordnete ' + item.ObjectType;
// If array with name doesn't exist, create it
if(!carry[name]) carry[name] = [];
// If item isn't in the array, add it.
if(!~carry[name].indexOf(item.Name)) carry[name].push(item.Name);
return carry;
}, {});
// Convert the hash into an array
var output = Object.keys(hash).map(function(key, index, array){
return { Fieldname: key, Value: hash[key] }
});
document.write(JSON.stringify(output));

Try this:
function joinObjects( array ) {
// Start with empty array
var ret = new Array();
// Iterate array
for ( var i = 0; i < array.length; i++ ) {
// Search by fieldname
var match = false;
var j;
for ( j = 0; j < ret.length; j++ ) {
if ( array[i].Fieldname == ret[j].Fieldname ) { match = true; break; }
}
// If not exists
if ( !match ) {
// Intert object
ret.push({
Fieldname: array[i].Fieldname,
Value: new Array()
});
}
// Insert value
ret[j].Value.push( array[i].Value );
}
// Return new array
return ret;
}
http://jsfiddle.net/6entfv4x/

Consolidate quantity of identical items

I have array of items with values like below:-
item[0] A quantity[0] 10 Category[0] Alpha itemtype[0] Groceries
item[1] A quantity[1] 15 Category[1] Beta itemtype[1] Toiletries
item[2] B quantity[2] 5 Category[2] Alpha itemtype[2] Stationery
Using Javascript, I wanted to consolidate the quantity for identical items, plus it should only show item type where category is Alpha if there are few identical items. The result of the new arrays should be :
item[0] A quantity[0] 25 category[0] Alpha itemtype[0]Groceries
item[1] B quantity[1] 5 category[1] Alpha itemtype[1]Stationery

for (var i = 0, l = category.length; i < l; i++) {
if (category[i + 1] !== category[i]) {
category.splice(i + 1, 1);
item.splice(i + 1, 1);
quantity[i] = String(+quantity[i] + +quantity[i + 1]);
quantity.splice(i + 1, 1);
itemtype.splice(i + 1, 1);
}
i--; l--;
}
Fiddle
You can also add the separate arrays to a wrapper, and loop over that with forEach (IE9 and above IIRC):
var arrays = [ category, item , quantity, itemtype ];
for (var i = 0, l = category.length; i < l; i++) {
if (category[i + 1] !== category[i]) {
quantity[i] = String(+quantity[i] + +quantity[i + 1]);
arrays.forEach(function (el) { return el.splice(i + 1, 1); });
}
i--; l--;
}
Fiddle

I think it's easier to use array of objects like
var items = [
{item: 'A', quantity: 10, category: 'Alpha', itemtype: 'Groceries'},
{item: 'A', quantity: 15, category: 'Beta', itemtype: 'Toiletries'},
{item: 'B', quantity: 5, category: 'Alpha', itemtype: 'Stationery'}
]
then filter it
var result = [];
for(var i=0; i<items.length; i++){
if (items[i].category == "Alpha"){
result.push(items[i]);
}
}
result is your new array.

Try something like
// create JS-objects to collect the values ...
var i,nam,quant={},cat={},ityp={};
for (i=0; i<item.length; i++) {
nam=item[i];
// initialise the summation variable to zero first:
if (typeof quant[nam]=='undefined') quant[nam]=0;
// do the summation
quant[nam]+=quantity[i];
// initialise the string variables too:
if (typeof ityp[nam]=='undefined') ityp[nam]='';
if (typeof cat[nam]=='undefined') cat[nam]='';
if (category[i]=='Alpha') { // set the variables, if ...
ityp[nam]=itemtype[i];
cat[nam]=category[i];
}
}
// destroy original arrays ...
category=[];item=[];quantity=[];itemtype=[];
// ... and build them up again:
for (i in quant) {
item.push(i);
quantity.push(quant[i]);
category.push(cat[i]);
itemtype.push(ityp[i]);
}
This approach does not rely on any given order of the elements in the arrays.
See here for demo: http://jsfiddle.net/CP2cQ/