I've written a very simple application that pulls all the tracks off of a spotify playlist. First, it gets the track JSON objects using an AJAX request and puts them in an array called tracks[].
Next, I iterate through this array, and in each iteration I pull out the strings for the name of the song and the artist for each track. I put these in a concentrated string. This string is then stored in a new array called complete. This is done for each track.
Essentially, complete is an array that looks something like
[
"Sympathy for The Devil, The Rolling Stones",
"Come Together, The Beatles",
...
]
At this point I have a strange issue. According to chrome's debugger, the array complete has all of the correct values inside of it. However, when I attempt to console.log any element of complete I end up with the value 'undefined'. Stranger yet, if I console.log the expression I use to get the two strings and stitch them it prints the correct value.
Why does this happen and how can I fix it so it can console.log the correct values
Here is the code that iterates through stored JSON objects, stores them in new array, and prints:
function print() {
for(var x = 0; x < 4; x++) {
for(var n = 0; n < 100; n++) {
try {
//this logs correct
console.log(tracks[x].items[n].track.name + " " + tracks[x].items[n].track.artists[0].name);
//these have correct value
var deb = (tracks[x].items[n].track.name + " " + tracks[x].items[n].track.artists[0].name);
complete[z] = deb;
z++;
console.log(deb); //throws no error, prints fine
console.log(complete[z]); //prints undefined
} catch(err) {
//no exception ever thrown
}
}
}
}
I don't do too much JS, sorry if I'm missing something obvious.
Right after assigning complete[z], you are incrementing z. When printing, you are not accessing complete[z] anymore, but complete[z+1] which is not yet defined. Try moving the incrementation after the console.log command.
Well, in your example above, you've incremented z (which I assume was defined earlier somewhere?) after setting the value on your array. So when setting the value on the array, you've set it to complete[5] (or whatever) but you're logging complete[6] which is most likely outside the range of your array.
Related
I have an array in javascript and I can't access any data in it. The array prints out like this:
console View
EDIT
This is my code: The issue is it's not getting anything from data[x], and data is the name of my array
for (var x in data) {
yaxis.push(data[x].dateAdded);
xaxis.push(data[x].priority);
text_hover.push(data[x].name + ' - ' + data[x].organType);
}
I guess my issue is that its telling me my length is 0, but when in fact it is 1
To me this looks like your array has one item in it so
array.forEach( item => console.log( item.HLAType ))
should work or
array[0].HLAType
if however as someone suggested you want to print all the properties on your object you need to do:
let obj = array[0];
Object.keys(obj).forEach( key => {
console.log( obj[key] ) //prints the value of said key
})
It’s not really clear from your question what exactly – that is, which statement(s) – is troubling you. I’ll guess you’re searching for (for instance) a line like var objectsOrganSize = myArray[0].organSize; (if your array is called myArray).
Or iterating through it:
for(var i=0; i<myArray.length; i++){
console.log(myArray[i].organSize);
}
If, on the other hand, you’re confusing arrays with objects and actually want to iterate through organSize, bloodType, etc., look here
EDIT
Your code looks suspiciously like an asynchronous request. Could it be that your loop is executed when the data has not returned yet from the server. Or are you maybe accessing it outside of the callback function, so data is undefined?
I have an array containing information on playing cards (cardInfo). A sample of the array is added in the code below. Since each card may have duplicates, I want to use this information to create a deck by pushing its information to a new array (drawPile) for each card of that type (the property 'frequency1').
var common = 4;
var uncommon = 3;
var rare = 2;
var cardInfo = [
{name:'Card A',frequency1:common,frequency2:rare,frequency3:0},
{name:'Card B',frequency1:common,frequency2:uncommon,frequency3:0},
{name:'Card C',frequency1:uncommon,frequency2:uncommon,frequency3:0}
];
var drawPile = [];
for (var cType = 0; cType < cardInfo.length; cType++) {
for (var freq = 0; freq < cardInfo[cType].frequency1; freq++) {
drawPile.push(cardInfo[cType]);
console.log(drawPile.length - 1);
drawPile[(drawPile.length - 1)].id = (drawPile.length - 1);
console.log(drawPile[(drawPile.length - 1)]);
}
}
The resulting console log, however, shows that all 4 "Card A" cards have the id property 3, all 4 "Card B" cards have the id property 7, and all 3 "Card C" cards have the id property 10. It is as if the nested (freq) loop only runs for all .push() commands before it adds the id property.
More strangeness: when I run this code in jsfiddle, I can replicate these results if I first run it and then open the console log, but when I run it after the console lof is already open, it works as intended.
How do I ensure each card gets a unique identifier?
EDIT: It gets even stranger when I get the exact same results if I create a completely new for loop specifically for adding the id property as seen in this code.
As you loop around the cardInfo collection, for each cardInfo instance, you loop around the frequencies. Technically for each frequency you are pulling in the same instance of the cardInfo, so technically you are updating the same cardInfo instance for each frequency iteration. Now your next statement will be but I write console.log for each iteration. But when you debug the code, console.log outputs correctly, however I'm not sure whether this is the case when it is run through without a debug. So how can you resolve this?
After determining that it was modifying the same instance for each iteration of the related frequency, I decided to clone the card (I'm not saying this is a great idea, but it proves the concept). I achieved this by using:
JSON.parse(JSON.stringify(cardInfo[cType]));
Again this is not the most performant way of achieving this, but highlights where I believe the issue lies.
I have applied this change to a fiddle (I've also simplified the code a little) and if you remove the cloning it operates as you currently see it, but with the cloning it works as you would expect it.
I hope that helps
You are pushing object reference to the drawPile array in the loop. That's why all "Card A" cards have the same ID as array contains same reference. you have to clone the object before pushing into the loop. You can make the below change to your code.
for (var freq = 0; freq < cardInfo[cType].frequency1; freq++) {
drawPile.push(JSON.parse(JSON.stringify(cardInfo[cType])));
console.log(drawPile.length - 1);
drawPile[(drawPile.length - 1)].id = (drawPile.length - 1);
console.log(drawPile[(drawPile.length - 1)]);
}
I got a problem with this simple piece of code which i cant figure out.
Instead of printing the whole array in the console, i get the message "10 undefined". Altough if i put "var i" to 0 or below then it's all good and i get a full list from that number up to 10.
Why wont this work when "i" is set to a number above 0?
Took a picture of my console in chrome to show how it looks like:
var ar = [];
for (var i = 1; i <= 10; i++) {
ar.push(i);
console.log(ar[i]);
}
JavaScript array indices start at 0, not 1. The .push() method adds an element at the end of the array, which in the case of an empty array (as yours is when your loop begins) will be array element 0.
Your loop inserts the value 1 at array index 0, the value 2 at array index 1, and so forth up to the value 10 at array index 9.
Each of your console.log(ar[i]) statements is trying to log a value from an index one higher than the highest element index, and those elements will always be undefined. So the console logs the value undefined ten times.
You can log the last element of an array like this:
console.log(ar[ar.length-1]);
Or in your case where you (now) know that i will be one higher than the index that .push() used:
console.log(ar[i-1]);
"10 undefined" means that the console showed "undefined" 10 times.
As thefourtheye says in his comment, you're pushing the value i but the index of the element that you just pushed onto the end of the array is i - 1. This means that each time you console.log(ar[i]) you're logging something that's not yet defined.
This is all because the first element in the array is ar[0], not ar[1]. You can fix your problem by logging like so: console.log(ar[ i - 1 ]);
Because array indices start at zero. The current index is undefined that's why you get those. Try this instead:
var ar = [];
for(var i = 1;i <= 10;i++){
ar.push(i);
console.log(ar[i-1]);
}
I'm sending an array to the service
[
{
"toppingid": "ABB934CB-EAB7-4863-B832-7F533DA08E2F",
"toppingname": "Default",
"toppingprice": "0.000000"
}
]
When I console.log it shows as above. I do console.log as below
toppinglistforCart = [];
toppinglistforCart = request.body.toppinglist
console.log(toppinglistforCart);
But when I try to toppinglistforCart.length it returns 132 for some peculier reason.
and if I do console.log(toppinglistforCart[0]) then it returns [ very strange. Did someone else came through this same issue?
Thanks for your time
Your toppinglistforCart variable appears to be a string, with length 132. (It doesn't work in older IE, but) JS lets you use the topplinglistforCart[0] syntax to access individual characters within the string, similar to how the same syntax on an array accesses individual array items.
You need to parse the JSON content of your string to create an object:
toppinglistforCart = JSON.parse(request.body.toppinglist);
Note also that your first line:
toppinglistforCart = [];
...is not needed at all - it sets toppinglistforCart to a new empty array but then the next line sets toppinglistforCart to something else so that empty array gets thrown away.
I'm developing an HTML5 canvas game, and I have an array of images which are being drawn to the canvas. The images from the array are currently all being drawn correctly, and I have a console.log line which I want to use to display the size of the array in the console. But for some reason, the console keeps telling me that the array length is undefined.
The line I'm using to print the array length is:
console.log("sources array length = " + sources.length);
it's in a for loop:
for (index=0;index < numImages ;index++){
console.log(index);
images[index] = new Image();
images[index].src = sources[index];
console.log("Adding " + sources[index]);
callback(images[index]);
console.log("sources array length = " + sources.length);
}
As you can see, I have another console.log statement in the loop, to log each time the loop is run...
console.log(index);
This line prints the value of the variable index each time the loop is run, starting at 0, and increasing by 1 each time until the loops ends when it reaches the value equal to the variable 'numImages'.
But, for some reason, the line that should be printing the array length is displaying "sources array length = undefined" each time the loop runs, and not the actual length of the array.
Can anyone point out to me why this is? How can I make it display the length of the sources array each time the loop is run?
Edit 13/02/2013 # 15:10
The sources array is defined in the same file, using the line:
var sources = {};
The reason I have not defined a set length for the array, is because I need its length to by dynamic. I have then added elements to the array using lines like this:
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,
So what I want my console.log line to do, is tell me the length of the array as it currently is, i.e. how many elements have been added to it. As you can see in the first bit of code I had in my original post, I have a console.log which prints a message to the console every time an element is added to the sources array- they clearly are being added properly, as otherwise, they wouldn't be displayed on the canvas... so the array must have a length which is defined at the point that the images are drawn to the canvas, otherwise they wouldn't be in the array to be drawn.
But, for some reason, the line that should be printing the array length is displaying "sources array length = undefined" each time the loop runs, and not the actual length of the array.
...which tells us that sources doesn't have a length property, and thus is not an array. It's entirely possible to build something that isn't an array but which nevertheless has properties with names like 0, 1, etc. For instance:
var sources = {0: "zero", 1: "one", 2: "two"};
console.log(sources[0]); // "zero"
console.log(sources.length); // "undefined"
If you're getting sources by outputting some server-side information, it may well be being output in the form above (a plain object with numeric property names, which probably would be in quotes) rather than as an actual array, which would look like this:
var sources = ["zero", "one", "two"];
Re your edit
The sources array is defined in the same file, using the line:
var sources = {};
The reason I have not defined a set length for the array, is because I need its length to by dynamic. I have then added elements to the array using lines like this:
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,
That's not a problem, JavaScript arrays are dynamic (in fact, they're not really arrays at all — or at least, the standard kind aren't, there are newer typed ones that actually are arrays). So just change
var sources = {};
to
var sources = [];
to make it actually an array. Then you can add to the array the way you are already doing it (that's absolutely fine) or you can use sources.push(document.getElementById("chair").src); and such instead.