THis is going to sound like a stupid question but here it goes. I have a js array formatted like so
var locationID = [
{ ID: "ID1", location: "location1" },
{ ID: "ID2", location: "location2" },
{ ID: "ID3", location: "location3" },
];
I am trying to loop through the array
for(i = 0; i < locationID.length;i++){
var object = locationID[i];
}
I want to get both elements from the inner array so the ID and location. would I do this by object[0] or object["ID"] for example.
Also is there a more efficient way to do what I need to do like a for each loop or something along those lines.
Use object.ID or object['ID'].
Objects {} in JavaScript are associative, or named arrays. (Also known as a map in many languages. They are indexed by strings (in this case).
Arrays [], are indexed by integral numbers, starting from 0 and counting up to n-1, where n is the length of the array.
If you want to programmatically go through all the (key, value) pairs in each object, you can use this method.
Quotations (String Literals)
To reiterate my comment below about single and double quotes:
If you're talking about inside the [], no [,they're not important]. JavaScript treats single
quotes and double quotes pretty much the same. Both of them denote
string literals. Interestingly, you can use single quotes inside
double quotes or vice-versa: "I wanted to say 'Hello world!'" would be
a (single) valid string, but so would 'But I accidentally said "Goodbye".
This is an optimized loop based from the book of Nicholas Zackas (YAHOO performance chief). I am performing a cached array length to prevent re-evaluation of array length on every iteration of the loop. Please check jsperf.com. Also, native loop is always faster than method based loops jQuery.each and Array.prototype.forEach. This is also supported on browsers below ie8
var currentItem,
locationInfo = [
{ ID: "ID1", location: "location1" },
{ ID: "ID2", location: "location2" },
{ ID: "ID3", location: "location3" },
];
for (var i = 0, len = locationInfo.length; i < len; i++) {
currentItem = locationInfo[i];
console.log(currentItem.ID);//I prefer this because it shrinks down the size of the js file
console.log(currentItem["ID"]);
}
what you have already will return each of the objects in the JSON as you run the loop. What you need is something like
for(i = 0; i < locationID.length;i++){
var object = {locationID[i].ID, locationID[i].location};
}
Remember properties of objects are accessed by their keys since they are key-value pairs.
For loops are going to be your best bet as far as speed, here's how you'd do it with forEach (IE 9+)
locationID.forEach(function(location, i){
console.log(location['ID'])
console.log(location['location'])
});
jQuery make's it a little easier but runs slower
$.each(array, function(i, item){
});
http://jsperf.com/for-vs-foreach/75
Also here a useful link: For-each over an array in JavaScript?
You can use the forEach method, which make your code more cleaner.
See forEach
locationID.forEach(function(elm){
//Here, elm is my current object
var data = elm;
console.log(data.ID):
console.log(data.location);
});
EDIT :
Then for your second question, you should filter and map methods.
function findNamebyID(id){
//Filter by id and map the data to location
return locationID.filter(function(elm){
return elm.ID === id;
}).map(function(elm){
return elm.location;
})
}
Something as:
var location = locationID.reduce(function(ob, cur) {
ob[cur.ID] = cur.location;
return ob;
}, {});
The result you get is:
Object {ID1: "location1", ID2: "location2", ID3: "location3"}
Meaning you can do:
location.ID1 // location1
location.ID2 // location2
...
an alternative to your loop, would be to use the JavaScript for (.. in ..) since you aren't really using the iterator; it just adds fluff
for(i = 0; i < locationID.length;i++){
var object = locationID[i];
}
could be written as:
for (item in locationID) {
var object = item;
}
For some reason I have a string like this:
"id: 123, title: something, category: science, ... "
To make a javascript object containing the key-value pairs I wrote the following method:
function stringToMap(stringToCut){
var map = {};
var listOfPairs = stringToCut.split(",");
for(var i = 0; i < listOfPairs.length; i++){
var pair = listOfPairs[i].split(":");
map[pair[0]] = pair[1];
}
return map;
}
it's important to access it with dot, not with [] brackets.
In chrome debug mode I see the expected object, but when I want to access one of it's element, like:
console.log(obj.title);
I get undefined...
What Am I doing wrong?
It's because there's a space in your key name:
console.log(obj[" title"]); // "something"
To fix this, change your first split to split on ", " instead of just ",":
var listOfPairs = stringToCut.split(", ");
JSFiddle demo.
As a further fix, you'll also want to change your second split to split on ": " rather than just ":", otherwise all your values will begin with spaces.
var pair = listOfPairs[i].split(": ");
i have this snippet. As a result i see an error: Invalid left-hand side in assignment.
var arr = [ "text1", "text2", "text3", "text4" ];
jQuery.each(arr, function(index, value) {
this = jQuery("#sc-dialog ."+value).val();
});
Does anyone can point me to how to fix this?
Thanks.
This is an UPDATE
I need that variable 'text' will have the numbers in the loop: text1, text2, text3... i have made it like this:
var arr = [ "1", "2", "3", "4" ];
jQuery.each(arr, function(index, value) {
var text + index = jQuery("#sc-dialog .text"+value).val();
});
But i got an error: Unexpected identifier. The problem is here: var text + index
Try like this:
jQuery.each(arr, function(index, value) {
arr[index] = jQuery("#sc-dialog ."+value).val();
});
Putting a + after your variable name is a syntax error in your var statement:
var text + index = jQuery("#sc-dialog .text"+value).val()
A valid variable declaration will be either variable name by itself:
var text;
Or the variable name with an assigned value:
var text = jQuery("#sc-dialog .text"+value).val();
The value being assigned can have a + or other operators in it:
var x = y + z - 5 * (a + b);
And in a single var statement you can declared multiple variables with or without values by separating them with commas:
var i, j = 0, k, text = jQuery("#sc-dialog .text"+value).val(), x = 12 + 4;
An array of numbers that follow a simple pattern (in this case array element index plus 1) is kind of pointless when you can achieve the same thing with a standard for loop. EDIT: from your comment it seems like you don't want to process the values within the loop, you want to store the values for later use. You mention wanting text1, text2, etc., but if you need to reference them individually it sounds like your various textareas aren't really a group and it doesn't make sense to process them in a loop at all. But if you insist then you should store the values in an array:
var i,
text = [];
for (i = 1; i <=4; i++) {
text[i] = jQuery("#sc-dialog .text"+i).val();
}
// later in your code
// text[1] is first value,
// text[2] is second value, etc
Note that JS array indexes are zero-based, and array .length is one more than the highest index, but your field numbering starts at 1 - keep that in mind if you later loop over the text array.
You can't use 'this' as a variable name. try something like:
var arr = [ "text1", "text2", "text3", "text4" ];
jQuery.each(arr, function(index, value) {
var dialogValue = jQuery("#sc-dialog ."+value).val();
});
What's the most efficient way to create this simple array dynamically.
var arr = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
Let's say we can get the number 10 from a variable
var mynumber = 10;
var arr = [];
for(var i=1; i<=mynumber; i++) {
arr.push(i.toString());
}
With ES2015, this can be achieved concisely in a single expression using the Array.from method like so:
Array.from({ length: 10 }, (_, idx) => `${++idx}`)
The first argument to from is an array like object that provides a length property. The second argument is a map function that allows us to replace the default undefined values with their adjusted index values as you requested. Checkout the specification here
Update: micro-optimizations like this one are just not worth it, engines are so smart these days that I would advice in the 2020 to simply just go with var arr = [];.
Here is how I would do it:
var mynumber = 10;
var arr = new Array(mynumber);
for (var i = 0; i < mynumber; i++) {
arr[i] = (i + 1).toString();
}
My answer is pretty much the same of everyone, but note that I did something different:
It is better if you specify the array length and
don't force it to expand every time
So I created the array with new Array(mynumber);
This answer is about "how to dynamically create an array without loop".
Literal operator [] doesn't allow us to create dynamically, so let's look into Array, it's constructor and it's methods.
In ES2015 Array has method .from(), which easily allows us to create dynamic Array:
Array.from({length: 10}) // -> [undefined, undefined, undefined, ... ]
When Array's constructor receives number as first parameter, it creates an Array with size of that number, but it is not iterable, so we cannot use .map(), .filter() etc. :
new Array(10) // -> [empty × 10]
But if we'll pass more than one parameter we will receive array from all parameters:
new Array(1,2,3) // -> [1,2,3]
If we would use ES2015 we can use spread operator which will spread empty Array inside another Array, so we will get iterable Array :
[...new Array(10)] // -> [undefined, undefined, undefined, ...]
But if we don't use ES2015 and don't have polyfills, there is also a way to create dynamic Array without loop in ES5. If we'll think about .apply() method: it spreads second argument array to params. So calling apply on Array's constructor will do the thing:
Array.apply(null, new Array(10)) // -> [undefined, undefined, undefined, ...]
After we have dynamic iterable Array, we can use map to assign dynamic values:
Array.apply(null, new Array(10)).map(function(el, i) {return ++i + ""})
// ["1","2","3", ...]
Sounds like you just want to construct an array that contains the string versions of the integer values. A simple approach:
var arr = [];
for (var i = 1; i <= mynumber; i++) arr.push(""+i);
For a more interesting version you could do a generator...
function tail(i, maxval) {
return [i].concat(i < maxval ? tail(i+1, maxval) : []);
}
var arr = tail(1, mynumber);
var arr = [];
while(mynumber--) {
arr[mynumber] = String(mynumber+1);
}
I would do as follows;
var num = 10,
dynar = [...Array(num)].map((_,i) => ++i+"");
console.log(dynar);
misread the question, corrected. Try:
var myNumber = 100,
myarr = (function arr(i){return i ? arr(i-1).concat(i) : [i]}(myNumber));
Just for fun, if you extend Array like this:
Array.prototype.mapx = function(callback){
return String(this).split(',').map(callback);
}
You could use:
var myNum = 100,
myarr = new Array(myNum).mapx(function(el,i){return i+1;});
var arr = [];
for(var i=1; i<=mynumber; i++) {
arr.push("" + i);
}
This seems to be faster in Chrome, according to JSPerf, but please note that it is all very browser dependant.
There's 4 things you can change about this snippet:
Use for or while.
Use forward or backward loop (with backward creating sparse array at beginning)
Use push or direct access by index.
Use implicit stringification or explicitly call toString.
In each and every browser total speed would be combination of how much better each option for each item in this list performs in that particular browser.
TL;DR: it is probably not good idea to try to micro-optimize this particular piece.
I had a similar problem and a solution I found (forgot where I found it) is this:
Array.from(Array(mynumber), (val, index) => index + 1)
A little late to this game, but there is REALLY cool stuff you can do with ES6 these days.
You can now fill an array of dynamic length with random numbers in one line of code!
[...Array(10).keys()].map(() => Math.floor(Math.random() * 100))
Since none of previous answers provide solution with repeat Here you go:
To generate dynamic array of ten numbers with repeat:
[...'x'.repeat(10).split('').keys()]
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
To get what you want:
var arr = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
Just add one to all of elements keys (since array are zero-based) and convert numbers to string by string literals or .toString() or even just add empty space to number ''+x.
let mynumber = 10;
const keys = [...'x'.repeat(mynumber).split('').keys()]
const arr = keys.map(x=>`${x+1}`);
//['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
If you are asking whether there is a built in Pythonic range-like function, there isn't. You have to do it the brute force way. Maybe rangy would be of interest to you.
I hope you have to get last element from array variable so my solution
var arr = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var mynumber = arr [arr .length - 1];
//var mynumber = 10;
Some of us are referring to use from which is not good at the performance:
function getArrayViaFrom(input) {
console.time('Execution Time');
let output = Array.from(Array(input), (value, i) => (i + 1).toString())
console.timeEnd('Execution Time');
return output;
}
function getArrayViaFor(input) {
console.time('Execution Time 1');
var output = [];
for (var i = 1; i <= input; i++) {
output.push(i.toString());
}
console.timeEnd('Execution Time 1');
return output;
}
console.log(getArrayViaFrom(10)) // Takes 10x more than for that is 0.220ms
console.log(getArrayViaFor(10)) // Takes 10x less than From that is 0.020ms
updated = > june 2020
if are you using node js you can create or append a string value with " ," operator then inside the loop you can
for (var j = 0; j <= data.legth -1; j++) {
lang += data.lang +", " ;
}
var langs = lang.split(',')
console.log("Languages =>", lang, typeof(lang), typeof(langs), langs)
console.log(lang[0]) // here access arrary by index value
you can see the type of string and object
The same way you would for all arrays you want to fill dynamically.
A for loop.
Suedo code is
arr =array()
for(i; i<max; i++){
arr[]=i
}
that should help you on the way
I have a multiple select list item with id "genres". In my code, I get the value of "genres", split it, and then iterate through and adds each value to another array. But for some reason, it's adding an extra entry. Here's my code:
if ($("#genres").val()!=null) {
var genres = $("#genres").val().toString().split(",");
for (var i in genres) {
model.TitleGenres.push({ GenreId: genres[i] });
}
}
The variable model.TitleGenres is initialized as [];
When I debug this in Firebug, the values I get are:
genres: [ "6", "1770" ]
At the end of the loop, I get:
model.TitleGenres: [Object { GenreId="6"}, Object { GenreId="1770"}, Object { GenreId=function()}]
I have no idea why there is an extra entry with GenreId=function(), can anybody explain why that is and how to eliminate it?
Do not iterate over (numerical indexed) arrays in JS with for in.
Use for (var i = 0, len = array.length; i < len; i++) { ... }
Its cause you iterate over an array with 'for in' and not foreach or simpley for. With for in you iterate over all members of the array object, or in this case jquery object. It seems that one of them is a function. Use genres.each() instead.
How about this:
var x = [];
$('#genres option:selected').each( function() { x.push($(this).val()) } );
Now "x" will hold all the selected values.