We Keep Coding

Can't access any arrays after sorting another array

I have encountered a very strange bug:
I derive a new array allSavings[] from another one (tours[]) and sort it in the function calculateAllSavings(). Before I call the function I can access tours[] just fine, but afterwards, I can't anymore. The div tags demo1 and demo2 both exist and are working fine for other outputs.
function euclDist(node1,node2){
if(node1 != node2){
var x = Math.pow(nodes[node2].x - nodes[node1].x,2);
var y = Math.pow(nodes[node2].y - nodes[node1].y,2);
var dist = Math.sqrt(x+y);
return dist;
}
else return 0.0;
}
function tourDist(members){
var tourDist = 0.0;
if (members.length>1){
for (i = 1; i < members.length; i++)
tourDist += euclDist(members[i],members[i-1]);
}
return tourDist;
}
function combineTours(tourA, tourB){
tourA.pop();
tourB.shift();
return tourA.concat(tourB);
}
function calculateSaving(tourA,tourB){
var costSeparate = tourDist(tourA) + tourDist(tourB);
var combTour = combineTours(tourA,tourB);
var costCombined = tourDist(combTour);
return costSeparate - costCombined;
}
function calculateAllSavings(){
var allPossibilities = [];
for(var i = 0; i < tours.length; i++){
for(var j = 0; j < tours.length; j++){
if(i != j)
var savingObj = {saving:calculateSaving(tours[i],tours[j]), tourA: i, tourB: j};
allPossibilities.push(savingObj);
}
}
allPossibilities.sort(function(a, b){
return b.saving-a.saving
})
document.getElementById("demo3").innerHTML = "success";
return allPossibilities;
}
//Initialize Array
var tours = [];
tours.push([0,1,2,3,0]);
tours.push([0,4,5,6,0]);
tours.push([0,7,8,0]);
tours.push([0,9,10,0]);
//BUG
document.getElementById("demo1").innerHTML = tours.join('\n'); // Shows array correctly
var allSavings = calculateAllSavings(); //BUG APPEARS HERE
document.getElementById("demo2").innerHTML = tours.join('\n'); // Doesn't show anything
Edit Solved:
combine() was overwriting the original tours[].
by doing the combining with cloned tours, the original was left untouchted.
function combineTours(tourA, tourB){
var tour1 = tourA.slice(0);
var tour2 = tourB.slice(0);
tour1.pop();
tour2.shift();
return tour1.concat(tour2);
}
Thanks to everyone who helped me

Well, in combineTours function you're calling .pop() method on one array and .shift() method on another, which removes one element from each of these arrays. In calculateAllSavings you're calling calculateSaving in a loop and it's calling combineTours, so you're effectively removing all elements from the sub-arrays.
Maybe you should just remove these lines from combineTours:
tourA.pop();
tourB.shift();
For the future: use console.log() for debugging, it could help you identify the issue.

Can you try this?
for(var i = 0; i < tours.length; i++){
for(var j = 0; j < tours[i].length; j++){
if(i != j)
var savingObj = {saving:calculateSaving(tours[i],tours[j]), tourA: i, tourB: j};
allPossibilities.push(savingObj);
}
}
Apart from this, you can also debug and see if your document.getElementById("demo2").innerHTML = tours.join('\n'); line actually gets executed. You may be running an infinite loop. Try and debug your code using chrome developer tools.

Check for duplicates in array with randomly generated values

I'm working on exercism question and am stuck on one of the jasmine-node based tests, which says that I should be able to generate 10000 random names without any clashes (e.g. 2 randomly generated names match). This is the test:
it('there can be lots of robots with different names each', function() {
var i,
numRobots = 10000,
usedNames = {};
for (i = 0; i < numRobots; i++) {
var newRobot = new Robot();
usedNames[newRobot.name] = true;
}
expect(Object.keys(usedNames).length).toEqual(numRobots);
});
What I think I need to do is:
Create an array to hold all the names (robotNames),
Each time a name is generated, check if it exists in the array,
If it does, generate another name,
If it doesn't, add it to the array.
And here is my code so far...
"use strict";
var robotNames = [];
var name;
var Robot = function() {
this.name = this.generateName();
};
Robot.prototype.generateName = function() {
var letters = "";
var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numbers = "";
var digits = "0123456789";
// generate random characters for robot name...
for( var i=0; i < 2; i++ ) {
letters += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
};
for( var i=0; i < 3; i++ ) {
numbers += digits.charAt(Math.floor(Math.random() * digits.length));
};
name = letters+numbers;
// Loop through array to check for duplicates
for(var i = 0; i < robotNames.length; i++) {
if (name == robotNames[i]) {
this.generateName();
return;
} else {
robotNames.push(name);
}
}
return name;
};
Robot.prototype.reset = function() {
this.name = this.generateName();
};
module.exports = Robot;
The test fails with an error message: "Expected 9924 to equal 10000."
The '9924' number is slightly different each time I run the test. I'm thinking this means the generateName function is eventually generating 2 matching random names. It seems as though my loop for checking duplicates is not being run and I'm not sure why.
I have tried a couple of different versions of the loop but with no success. So my questions is a) is my approach correct and there is something wrong with the syntax of my loop? or b) have I got the wrong idea about how to check for duplicates here?
Any pointers appreciated, thanks.

The problem is in this bit:
for(var i = 0; i < robotNames.length; i++) {
if (name == robotNames[i]) {
this.generateName();
return;
} else {
robotNames.push(name);
}
}
...you probably only want to push your name if NONE of the names fail to match. Here you're adding it to the list as soon as you find ONE that doesn't match. You want something more like:
for(var i = 0; i < robotNames.length; i++) {
if (name == robotNames[i]) {
return this.generateName();
}
}
robotNames.push(name);
(actually, combined with the fact that you weren't even returning the recursive call to this.generateName(), I'm not sure how your program could work...)

Find a library with an implementation for Sets. Collections.js is a good example.
One property of a set is that it doesn't have duplicates. So when you add a value to a set it will look for a duplicate and then add the value if no duplicate exists.

3d Array Over-writing Values from other dimensions JS

I can't seem to figure out what I'm doing wrong on this code I wrote yesterday. This was my first time whipping up JavaScript, and using jQuery and Node.js also both for the first time, and I would think this three dimensional array should work as is. I've seen confusing mention about what multidimensional arrays are and people saying that JavaScript does not have any, though it has arrays of arrays. Anyways I guess I'm technically using an array of an array of an array, and don't understand why my outer array, which I imagined being an outer dimension by design, over-writes elements from the two inner-arrays into its own elements. The two inner arrays appear to work as they are supposed to, but the outter-most array mixes up the data in some way I don't really understand.
The inconsistency/problem can be observed by scrolling through the output.json file that is generated by this code and seeing that the outputs clearly do not match up with each of the three tables on this webpage I'm scraping from:
// My server.js file:
var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var app = express();
// the link below is a tutorial I was loosely following
// see http://scotch.io/tutorials/javascript/scraping-the-web-with-node-js
app.get('/scrape', function(req, res) {
url = 'http://espn.go.com/nba/player/stats/_/id/4145/kareem-abdul-jabbar'
request(url, function(error, response, html) {
if(!error) {
// utilize the Cheerio library on the returned html, yielding jQuery functionality
var $ = cheerio.load(html);
var numOfRows;
var stats = [[[]]];
for(var chart = 0; chart < 3; chart++) {
stats.push([[]]); // allocates space for each grid on each chart (each set of rows and columns)
$('.tablehead').eq(chart).filter(function(){
var data = $(this);
numOfRows = data.children().length - 2;
for(var i = 0; i < numOfRows + 1; i++) {
stats[chart].push([]); // allocates space for each row in the chart
}
})
var numOfColumns;
$('.stathead').eq(chart).filter(function(){
var data = $(this);
stats[chart][0][0] = data.children().first().text();
})
$('.colhead').eq(chart).filter(function(){ // first() specifies to select the first of the three occurances of this class; use eq(param) to find the Nth occurance
var data = $(this);
numOfColumns = data.children().length;
for(var i = 0; i < numOfColumns; i++) {
stats[chart][1][i] = data.children().eq(i).text();
}
})
var currentRow = 2;
for(var oddRow = 0; oddRow < (numOfRows + 1)/2 - 1; oddRow++) {
$('.tablehead .oddrow').eq(oddRow).filter(function(){
var data = $(this);
for(var c = 0; c < numOfColumns; c++) {
stats[chart][currentRow][c] = data.children().eq(c).text();
}
currentRow += 2;
})
}
currentRow = 3;
for(var evenRow = 0; evenRow < (numOfRows + 1)/2 - 1; evenRow++){
$('.tablehead .evenrow').eq(evenRow).filter(function(){
var data = $(this);
for(var c = 0; c < numOfColumns; c++) {
stats[chart][currentRow][c] = data.children().eq(c).text();
}
currentRow += 2;
})
}
currentRow -= 1; // gets the last allocated row index (after "currentRow += 2" has been executed)
$('.tablehead .total').eq(chart).filter(function(){
var data = $(this);
var LOGOIDX = 1;
for(var c = 0; c < numOfColumns - 1; c++) {
if(c < LOGOIDX) {
stats[chart][currentRow][c] = data.children().eq(c).text();
}
if(c == LOGOIDX) {
stats[chart][currentRow][c] = "N.A.";
stats[chart][currentRow][c + 1] = data.children().eq(c).text();
continue;
}
else {
stats[chart][currentRow][c + 1] = data.children().eq(c).text();
}
}
})
} // end chart loop
}
// Want to parse my json so that it displays in format: "name: value" rather than just "name" as it is now...
fs.writeFile('output.json', JSON.stringify(stats, null, 4), function(err){
console.log('File successfully written! - Check the project directory for the output.json file');
console.log('Number of columns in chart is: ' + numOfColumns);
})
// message to browser reminding that there's no UI involved here.
res.send('Check the console!')
})
})
app.listen('8081')
console.log('Magic happens on port 8081');
exports = module.exports = app;

Aha! Caught my bug -- just a simple logical error. Kind of embarrassing I didn't see it earlier, but oh well, got some practice and research (and a fair amount of distraction) by the end of the day:
As it can be seen, all the searching for HTML classes I did were parameterized by a variable named "chart", except for where I searched for odd rows and even rows within each chart -- the actual scraping of the bulk of each chart, so it naively appeared that my "3d array [was] over-writing values from other dimensions" <-- lol.
In simple, I just needed to create an offset based on a condition for each chart (a few extra lines of code), and I needed to edit two lines of code to reflect the newly calculated offset like so:
$('.tablehead .oddrow').eq(rowOffset + oddRow).filter(function(){
and
$('.tablehead .evenrow').eq(rowOffset + evenRow).filter(function(){
Thanks anyways for any help! I hope this issue tangentially benefits others greatly : P

populate select element based on json

How could I populate a second select element? I've figured out how to do the first one. But how could I do the same for the second depending on which "Make" is selected? I've tried to talk myself through it while taking small steps but I'm thinking this may be too advanced for me.
var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"},{"name":"Spider","value":"22172"}]}';
var carobj = eval ("(" + cars + ")");
var select = document.getElementsByTagName('select')[0];
//print array elements out
for (var i = 0; i < carobj.USED.length; i++) {
var d = carobj.USED[i];
select.options.add(new Option(d.name, i))
};

If I read your question right, you want to populate a second select with the models for the make in the first select. See below for a purely JS approach (with jsfiddle). If possible, I would recommend looking into jQuery, since I would prefer a jQuery solution.
http://jsfiddle.net/m5U8r/1/
var carobj;
window.onload = function () {
var cars = '{"USED":[{"name":"Acura","value":"20001","models":[{"name":"CL","value":"20773"},{"name":"ILX","value":"47843"},{"name":"ILX Hybrid","value":"48964"},{"name":"Integra","value":"21266"},{"name":"Legend","value":"21380"},{"name":"MDX","value":"21422"},{"name":"NSX","value":"21685"},{"name":"RDX","value":"21831"},{"name":"RL","value":"21782"},{"name":"RSX","value":"21784"},{"name":"SLX","value":"21879"},{"name":"TL","value":"22237"},{"name":"TSX","value":"22248"},{"name":"Vigor","value":"22362"},{"name":"ZDX","value":"32888"}]},{"name":"Alfa Romeo","value":"20047","models":[{"name":"164","value":"20325"},{"name":"8c Competizione","value":"34963"}, {"name":"Spider","value":"22172"}]}]}';
carobj = eval ("(" + cars + ")");
var makes = document.getElementById('make');
for (var i = 0; i < carobj.USED.length; i++) {
var d = carobj.USED[i];
makes.options.add(new Option(d.name, i));
}
makes.onchange = getModels;
getModels();
}
// add models based on make
function getModels () {
var makes = document.getElementById('make');
var make = makes.options[makes.selectedIndex].text;
for (var i = 0; i < carobj.USED.length; i++) {
if (carobj.USED[i].name == make) {
var models = document.getElementById('model');
models.options.length = 0;
for (var j= 0; j < carobj.USED[i].models.length; j++) {
var model = carobj.USED[i].models[j];
models.options.add(new Option(model.name, j));
}
break;
}
}
}
I would also recommend looking into safer JSON parsing. There is a security risk in using eval if it runs on any user input. You could look into JSON.org and their json2.js. Or if you want to use jQuery: parseJSON. Below is the jQuery version:
jQuery.parseJSON(jsonString);
JSON parsing tips from: Safely turning a JSON string into an object.

Finding an object and returning it based on search criteria

I have been searching online all day and I cant seem to find my answer. (and I know that there must be a way to do this in javascript).
Basically, I want to be able to search through an array of objects and return the object that has the information I need.
Example:
Each time someone connects to a server:
var new_client = new client_connection_info(client_connect.id, client_connect.remoteAddress, 1);
function client_connection_info ( socket_id, ip_address, client_status) {
this.socket_id=socket_id;
this.ip_address=ip_address;
this.client_status=client_status; // 0 = offline 1 = online
};
Now, I want to be able to search for "client_connection.id" or "ip_address", and bring up that object and be able to use it. Example:
var results = SomeFunction(ip_address, object_to_search);
print_to_screen(results.socket_id);
I am new to javascript, and this would help me dearly!

Sounds like you simply want a selector method, assuming I understood your problem correctly:
function where(array, predicate)
{
var matches = [];
for(var j = 0; j < array.length; j++)
if(predicate(j))
matches.push(j);
return matches;
}
Then you could simply call it like so:
var sample = [];
for(var j = 0; j < 10; j++)
sample.push(j);
var evenNumbers = where(sample, function(elem)
{
return elem % 2 == 0;
});
If you wanted to find a specific item:
var specificguy = 6;
var sixNumber = where(sample, function(elem)
{
return elem == specificguy;
});

What have you tried? Have you looked into converting the data from JSON and looking it up as you would in a dictionary? (in case you don't know, that would look like object['ip_address'])
jQuery has a function for this jQuery.parseJSON(object).

You're going to need to loop through your array, and stop when you find the object you want.
var arr = [new_client, new_client2, new_client3]; // array of objects
var found; // variable to store the found object
var search = '127.0.0.1'; // what we are looking for
for(var i = 0, len = arr.length; i < len; i++){ // loop through array
var x = arr[i]; // get current object
if(x.ip_address === search){ // does this object contain what we want?
found = x; // store the object
break; // stop looping, we've found it
}
}