Related
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>
I have two arrays containing objects. One contains keys in some order and another has data and I need to sort the data array in order against the given sorted key array. How can I do this?
var a = ['d','a','b','c'] ;
var b = [{a:1},{c:3},{d:4},{b:2}];
The result should be:
result = [{d:4},{a:1},{b:2},{c:3]
Try this
var a = ['d','a','b','c'] ;
var b = [{a:1},{c:3},{d:4},{b:2}];
b.sort(function(x,y){
var xkey = a.indexOf(Object.keys(x)[0]);
var ykey = a.indexOf(Object.keys(y)[0]);
return xkey - ykey;
})
document.body.innerHTML += JSON.stringify(b,0,4);
A different approach from above ones would be, using Lodash Javascript Library.
var a = ['d','a','b','c'] ;
var b = [{a:1},{c:3},{d:4},{b:2}];
var results = _.map(a,function(av) {
var obj = {};
obj[av] = _.find(b, av)[av];
return obj
});
document.body.innerHTML += JSON.stringify(results);
<script src="https://cdn.jsdelivr.net/lodash/4.11.1/lodash.min.js"></script>
This approach respects the keys in the objects of the array for sorting.
Only the items of a are used for lookup and their respective order.
In this case d gets all sort value of the item of b, so d looks like
[ 1, 3, 0, 2 ]
While sorting with indices, we need e, which has simply the indices of b
[ 0, 1, 2, 3 ]
after sorting it became
[ 2, 0, 3, 1 ]
the wanted sort order. Now the original array is remapped to the new order.
But why?
Usually objects contains more than one property. If you use Object.keys and take just the first element, then you could go wrong, because this element is not the wanted element for getting the sort order.
To make it save, you need a different approach, which does not use Array#indexOf in combination with a fixed item of Object.keys.
var a = ['d', 'a', 'b', 'c'],
b = [{ a: 1 }, { c: 3 }, { d: 4 }, { b: 2 }],
d = b.map(function (bb) {
var k = -1;
a.some(function (aa, i) {
if (aa in bb) {
k = i;
return true;
}
});
return k;
}),
e = b.map(function (_, i) { return i; });
e.sort(function (a, b) {
return d[a] - d[b];
});
b = e.map(function (a) {
return b[a];
});
document.write('<pre> ' + JSON.stringify(b, 0, 4) + '</pre>');
This should do the trick
result = a.map(function(key) {
for(var i=0; i<b.length; ++i) {
if(key in b[i]) return b[i];
}
});
Brute force approach is to loop through each of a array and check the b array for it's presence.
var a = ['d','a','b','c'] ;
var b = [{a:1},{c:3},{d:4},{b:2}];
var ans = [];
for(var i = 0; i < a.length; ++i)
{
for(var j = 0; j < b.length; ++j)
{
if(b[j][a[i]])
ans.push(b[j]);
}
}
document.write(JSON.stringify(ans, 0, 4));
I have an array that is sorted in the following way
var items = [2.99, 5.99, 23.99, 1.99];
items.sort(function(a,b) { return a - b;});
This outputs the following:
[1.99, 2.99, 5.99, 23.99]
But I need a way to sort it but keep an index of the original index, e.g.
[3: 1.99, 0: 2.99, 1: 5.99, 2:23.99]
Any help would be appreciated.
Map it to an array of objects.
So in the resulting array, each member is an object with an n property that holds the number, and an i property that holds the original index.
You can then iterate that array and get the data like normal.
var items = [2.99, 5.99, 23.99, 1.99];
var arr_of_objs = items.map(function(n, i) {
return { n:n, i:i };
}).sort(function(a, b) {
return a.n - b.n;
});
arr_of_objs.forEach(function(obj, i) {
this.textContent += "number: " + obj.n + ", orig idx: " + obj.i + ", new idx: " + i + "\n";
}, document.querySelector("pre"));
<pre></pre>
var items = [2.99, 5.99, 23.99, 1.99];
var sortable = [];
for (var i = 0; i < items.length; i++) {
sortable.push([i, items[i]]);
}
sortable.sort(function(a, b) {
return a[1] - b[1]
});
console.log(sortable);
Unfortunately it is not possible in JS get sorting in this case. JS understands array only as [0: 1.99, 1:2.99, 3:23.99] -- you cannot change order of indexes. But you can use array of arrays or array of object to solve the problem.
var items = [2.99, 5.99, 23.99, 1.99];
function PreserveKeysSorting(arr) {
var arr = arr
obj = [];
for(i in arr) {
obj.push({index: i, value: arr[i]});
}
obj.sort(function(a,b) { return a.value - b.value;});
return obj;
}
console.log(items);
console.log(PreserveKeysSorting(items));
Live Demo -- http://jsfiddle.net/u1g0xsap/1/
The array that you want as a result is not valid, but you can do something like this:
First make an array that contains objects that persists the index:
var itemsObj = [];
items.forEach(function(value, index) {
itemsObj.push({
value: value,
index: index
});
});
Then you can sort them like this:
items.sort(function(a,b) { return a.value - b.value;});
and you will get an arary of objects like this
[{index:3, value: 1.99}, {index: 0, value: 2.99}, {index: 1, value: 5.99}, {index:2, value:23.99}]
Hardcode the index into the array:
var items = [2.99, 5.99, 23.99, 1.99]
var itemsWithIndex = [];
for (i=0; i<items.length; i++) { itemsWithIndex[i] = [i+1, items[i]]; }
itemsWithIndex.sort(function(a,b) { return a[1]-b[1]; });
Note that an auxiliary variable (itemsWithIndex) was added for clarity, but you can also just update the original array:
var items = [2.99, 5.99, 23.99, 1.99]
for (i=0; i<items.length; i++) { items[i] = [i+1, items[i]]; }
items.sort(function(a,b) { return a[1]-b[1]; });
You could use two arrays and indexOf() method:
// Variables
var items = items_sort = [2.99, 5.99, 23.99, 1.99];
var order = new Array();
// Sort array
items_sort.sort(function(a,b) { return a - b;});
// Get order
for (i = 0; i < items.length; i++) {
order[i] = items.indexOf(items_sort[i]);
}
I have run into an issue where I am trying to join two arrays similar to the ones below:
var participants = [
{id: 1, name: "abe"},
{id:2, name:"joe"}
];
var results = [
[
{question: 6, participantId: 1, answer:"test1"},
{question: 6, participantId: 2, answer:"test2"}
],
[
{question: 7, participantId: 1, answer:"test1"},
{question: 7, participantId: 2, answer:"test2"}
]
];
Using nested loops:
_.each(participants, function(participant) {
var row, rowIndex;
row = [];
var rowIndex = 2
return _.each(results, function(result) {
return _.each(result, function(subResult) {
var data;
data = _.find(subResult, function(part) {
return part.participantId === participant.id;
});
row[rowIndex] = data.answer;
return rowIndex++;
});
});
});
This works ok as long as the arrays are small, but once they get larger I am getting huge performance problems. Is there a faster way to combine two arrays in this way?
This is a slimmed down version of my real dataset/code. Please let me know if anything doesn't make sense.
FYI
My end goal is to create a collection of rows for each participant containing their answers. Something like:
[
["abe","test1","test1"],
["joe","test2","test2"]
]
The perf* is not from the for loops so you can change them to _ iteration if they gross you out
var o = Object.create(null);
for( var i = 0, len = participants.length; i < len; ++i ) {
o[participants[i].id] = [participants[i].name];
}
for( var i = 0, len = results.length; i < len; ++i ) {
var innerResult = results[i];
for( var j = 0, len2 = innerResult.length; j < len2; ++j) {
o[innerResult[j].participantId].push(innerResult[j].answer);
}
}
//The rows are in o but you can get an array of course if you want:
var result = [];
for( var key in o ) {
result.push(o[key]);
}
*Well if _ uses native .forEach then that's easily order of magnitude slower than for loop but still your problem is 4 nested loops right now so you might not even need the additional 10x after fixing that.
Here is a solution using ECMA5 methods
Javascript
var makeRows1 = (function () {
"use strict";
function reduceParticipants(previous, participant) {
previous[participant.id] = [participant.name];
return previous;
}
function reduceResult(previous, subResult) {
previous[subResult.participantId].push(subResult.answer);
return previous;
}
function filterParticipants(participant) {
return participant;
}
return function (participants, results) {
var row = participants.reduce(reduceParticipants, []);
results.forEach(function (result) {
result.reduce(reduceResult, row);
});
return row.filter(filterParticipants);
};
}());
This will not be as fast as using raw for loops, like #Esailija answer, but it's not as slow as you may think. It's certainly faster than using Underscore, like your example or the answer given by #Maroshii
Anyway, here is a jsFiddle of all three answers that demonstrates that they all give the same result. It uses quite a large data set, I don't know it compares to the size you are using. The data is generated with the following:
Javascript
function makeName() {
var text = "",
possible = "abcdefghijklmnopqrstuvwxy",
i;
for (i = 0; i < 5; i += 1) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
var count,
count2,
index,
index2,
participants = [],
results = [];
for (index = 0, count = 1000; index < count; index += 4) {
participants.push({
id: index,
name: makeName()
});
}
for (index = 0, count = 1000; index < count; index += 1) {
results[index] = [];
for (index2 = 0, count2 = participants.length; index2 < count2; index2 += 1) {
results[index].push({
question: index,
participantId: participants[index2].id,
answer: "test" + index
});
}
}
Finally, we have a jsperf that compares these three methods, run on the generated data set.
Haven't tested it with large amounts of data but here's an approach:
var groups = _.groupBy(_.flatten(results),'participantId');
var result =_.reduce(groups,function(memo,group) {
var user = _.find(participants,function(p) { return p.id === group[0].participantId; });
var arr = _.pluck(group,'answer');
arr.unshift(user.name);
memo.push(arr);
return memo ;
},[]);
The amounts of groups would be the amount of arrays that you'll have so then iterating over that with not grow exponentially as if you call _.each(_.each(_.each which can be quite expensive.
Again, should be tested.
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/