Function to add and replace items in observable array - javascript

Im trying to write a function that 1. adds an item to an observable array and 2. replaces the item if it already exists in the array
self.addNotification = function (name, availability, note) {
//see if we already have a line for this product
var matchingItem = self.notifications.indexOf(name);
if (matchingItem !== undefined) {
self.notifications.replace(self.notifications()[index(matchingItem)],
new Notification(self, name, availability, note));
}
else {
self.notifications.push(new Notification(self, name, availability, note));
}
};
What am I doing wrong?
Regards Anders

Here is my answer: fiddle
Hit F12 in Chrome or use FireBug in FireFox to see console log output.
var notifications = {
notifs: [],
updateNotifications: function(notification) {
'use strict';
var matchIndex;
for (matchIndex = 0; matchIndex < this.notifs.length; matchIndex += 1) {
if (this.notifs[matchIndex].name === notification.name) {
break;
}
}
if (matchIndex < this.notifs.length) {
this.notifs.splice(matchIndex, 1, notification);
} else {
this.notifs.push(notification);
}
}
};
notifications.updateNotifications({
name: 'John',
available: false,
note: "Huzzah!"
});
notifications.updateNotifications({
name: 'Jane',
available: true,
note: "Shazam!"
});
notifications.updateNotifications({
name: 'Jack',
available: true,
note: "Bonzai!"
});
notifications.updateNotifications({
name: 'Jane',
available: false,
note: "Redone!"
});
console.log(notifications);​

Well, Array.prototype.indexOf never returns undefined. Its either -1 (not found) or any number starting with 0 for the array index.

Related

Setting Correct Boolean Conditions

I am working on practicing booleans (where in the code below, I'm representing the number of times a fruit is counted, essentially that number will be what they can afford to the price, if that makes sense) and the code I am working on seems to be working, but the conditionals I have set are only returning as false and not as true and vice versa when they are swapped.
I'm just wondering if there is an issue with the logic that I currently have.
Here is the data that I have:
items = {
count: 100,
fruits: [
{ id: 'apple', price: 50 },
{ id: 'orange', price: 200 },
{ id: 'banana', price: 500 }
]
};
});
('returns true if the person can afford the item', function() {
const result = code.affordItem(items, 'apple');
expect(result).to.be.equal(true);
});
('returns false if person cannot afford the item', function() {
const result = code.affordItem(items, 'orange');
expect(result).to.be.equal(false);
Here is the code that I have:
function affordItem(items, itemId) {
if (items.count >= items.fruits.quantity && items.fruits.id === itemId) {
return true;
} else {
return false;
}
}
Any guidance would be much appreciated!
function affordItem(items, itemId) {
if (items.count >= items.fruits.length && items.fruits.id === itemId) {
return true;
} else {
return false;
}
}
Try this, i assumed you want to get the quantity of fruits so use array.length instead.

Deleting JSON object based on attribute

I am working with React, I have got a variable named newtreeData, which looks like:
var newTreeData = {
name: submitted_title,
resource_link: submitted_resource_link,
details: submitted_details,
uuid: submitted_uuid,
website_image: submitted_website_img,
children: [
{
name: "Edit and save",
resource_link: "uh",
uuid: uuid.v4(),
details: "hi",
website_image:
"https://cdn3.iconfinder.com/data/icons/harmonicons-06/64/plus-circle-512.png",
children: [{...}, {}, ...]
},
{
name: "Edit and save",
resource_link: "uh",
uuid: uuid.v4(),
details: "hi",
website_image:
"https://cdn3.iconfinder.com/data/icons/harmonicons-06/64/plus-circle-512.png"
}
]
};
The line children: [{...}, {}] is just representing that newTreeData's children can have children which can have children...
Anyways, I wrote a method name findUUIDthenDelete which should do in pseudocode: if(object.uuid == toFindUUID) then delete object, and here's the full code for findUUIDthenDelete:
findUUIDthenDelete = (orig_data, to_delete_uuid) => {
var targetIsFound = false;
if (orig_data.uuid == to_delete_uuid) {
targetIsFound = true;
}
if (targetIsFound == false) {
if (orig_data.children === undefined) {
} else {
//if target not found, run recursion
orig_data.children.map(eachChildren =>
this.findUUIDthenDelete(eachChildren, to_delete_uuid)
);
}
} else {
console.log(orig_data, "this is the child ");
console.log(orig_data.parent, "is found, deleting its parent");
delete orig_data
}
};
As you can see this method is two parts: first I locate the object which has the uuid that we are trying to seek (potentially with some recursions), then delete the object. However, right now I am getting the "delete in local variable strict mode blah blah" error because of doing delete orig_data. Any insights to any workarounds to that error or some totally new way of tackling this? Also sincere apologies if there is an obvious solution I am out of mental energy and unable to think of anything algorithmic at the moment.
This should do it:
function findUUIDthenDelete(tree, uuid) {
if (!tree.children) return;
tree.children = tree.children.filter(c => c.uuid !== uuid);
tree.children.forEach(c => findUUIDthenDelete(c, uuid));
}
Should be pretty self-explanatory.
First, if the current node has no children, exit right away.
Next, potentially remove a child from the children array if the uuid matches using filter().
Finally, recursion.
Ok I'll admit this turned out to be more complicated than I thought, but the solution below will work if you can use Immutable. Essentially it walks your objects and collects the path to find the object that has the uuid and then once it has done that, it removes it.
const testMap = Immutable.fromJS({
uuid: 1,
children: [{
uuid: 2,
children: [{
uuid: 3,
children:[{
uuid: 8
}]
},
{
uuid: 4
},
{
uuid: 5
},
]
},
{
uuid: 7
}]
});
function findPath(checkMap, uuid, pathMap, currentIndex) {
if (checkMap.has('uuid') && checkMap.get('uuid') === uuid) {
const updatePathMap = pathMap.get('path').push(currentIndex);
return new Immutable.Map({
found: true,
path: pathMap.get('path').push(currentIndex)
});
} else {
if (checkMap.has('children') && checkMap.get('children').size > 0) {
for (let i = 0; i < checkMap.get('children').size; i++) {
const child = checkMap.get('children').get(i);
const checkChildPath = findPath(child, uuid, pathMap, i);
if (checkChildPath.get('found') === true) {
let updatePath = checkChildPath.get('path').push('children');
updatePath = updatePath.push(currentIndex);
return new Immutable.Map({
found: true,
path: updatePath
});
}
}
}
return pathMap;
}
}
const testPath = findPath(testMap, 7, new Immutable.Map({
found: false,
path: new Immutable.List()
}), 0);
console.info(testPath);
const testPath2 = findPath(testMap, 8, new Immutable.Map({
found: false,
path: new Immutable.List()
}), 0);
console.info(testPath2);
if (testPath2.get('found') === true) {
const path = testPath2.get('path');
if (path.size === 1 && path.get(0) === 0) {
// Your highlest level map has the uuid
} else {
const truePath = path.shift();
const cleanedUpMap = testMap.removeIn(truePath);
console.info(cleanedUpMap);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"></script>

JSON property not updating the value for new key on third function call

I apologise in advance for the title, I haven't found what I have been looking for while debugging but I may not know the correct terms to search for.
I have the following object:
const Game = {
user: {
tool: {
displayName: "shovel",
level: 0,
max: 1,
},
backpack: {
level: 0,
max: 10,
contents: {
ice: 5,
}
}
},
locations: {
lifePod: {
displayName: "Life Pod",
loseOxygen: false
},
icyPlain: {
displayName: "Ice Plain",
loseOxygen: true,
materials: {
type: "ice",
}
},
metalPlain: {
displayName: "Metal Plain",
loseOxygen: true,
materials: {
type: "metal",
}
}
}
};
I would like to use the following function to increase the count of the item in ice by 1. This works 100% of the time correctly, however when I try to use "metal" instead, it only allows a maximum of 2.
function mineResource(locationName) {
let newLocation = Game.locations[locationName];
if (Game.user.currentLocation != "lifePod" && newLocation.materials != undefined && backpackNotFull()) {
var alreadyInserted = false;
materialType = newLocation.materials.type; //ice
materialAmount = Game.user.tool.max; //1
let {backpack} = Game.user;
if (backpack.contents != null || backpack.contents != undefined) {
for (item in backpack.contents) {
if (item == materialType) {
Game.user.backpack.contents[materialType] += Game.user.tool.max;
alreadyInserted = true;
refreshValues();
} else if (alreadyInserted) {
null;
} else {
Game.user.backpack.contents[materialType] = materialAmount;
refreshValues();
}
};
};
};
}
I am confused by the fact that this function works fine with Ice but not Metal. As a test I changed:
contents: {
ice: 5,
}
to:
contents: {
ice: 5,
metal: 5,
}
And call Game.user.backpack.contents showed only {ice: 5} and calling contents.metal was undefined. I had definitely saved and refreshed. Unfortunately as I am a beginner I don't know what I don't know and it's hard to search for this. I have a put console logs underneath the "if (item == materialType) {" line and they were outputting but not increasing the counter.
If you want to see the whole code it's on http://oxygen.meddleso.me/main.js
EDIT: I did just remove Ice, and made metal the default with 5 and now Metal goes up by 1 normally, but if I add Ice like I was adding metal, Ice only goes up to 2 now.
When you add metal, but have ice, before adding metal you do
} else {
Game.user.backpack.contents[materialType] = materialAmount; // remove this line
refreshValues();
}
So when mining metal you do contents['metal'] = 1 (on ice loop) and later contents['metal'] += 1 (on metal loop)... Since you are looping over item set contents[item]. But I´m sure you would not want to set contents['ice'] = 1 either when mining metalPlain, so just remove this line.

javascript: Alter the output of a function to the specified decimal place

I am not very good with my javascript but recently needed to work with a library to output an aggregated table. Was using fin-hypergrid.
There was a part where I need to insert a sum function (rollups.sum(11) in this example)to an object so that it can compute an aggregated value in a table like so:
aggregates = {Value: rollups.sum(11)}
I would like to change this value to return 2 decimal places and tried:
rollups.sum(11).toFixed(2)
However, it gives the error : "rollups.sum(...).toFixed is not a function"
If I try something like:
parseFloat(rollups.sum(11)).toFixed(2)
it throws the error: "can't assign to properties of (new String("NaN")): not an object"
so it has to be a function object.
May I know if there is a way to alter the function rollups.sum(11) to return a function object with 2 decimal places?
(side info: rollups.sum(11) comes from a module which gives:
sum: function(columnIndex) {
return sum.bind(this, columnIndex);
}
)
Sorry I could not post sample output here due to data confidentiality issues.
However, here is the code from the example I follow. I basically need to change rollups.whatever to give decimal places. The "11" in sum(11) here refers to a "column index".
window.onload = function() {
var Hypergrid = fin.Hypergrid;
var drillDown = Hypergrid.drillDown;
var TreeView = Hypergrid.TreeView;
var GroupView = Hypergrid.GroupView;
var AggView = Hypergrid.AggregationsView;
// List of properties to show as checkboxes in this demo's "dashboard"
var toggleProps = [{
label: 'Grouping',
ctrls: [
{ name: 'treeview', checked: false, setter: toggleTreeview },
{ name: 'aggregates', checked: false, setter: toggleAggregates },
{ name: 'grouping', checked: false, setter: toggleGrouping}
]
}
];
function derivedPeopleSchema(columns) {
// create a hierarchical schema organized by alias
var factory = new Hypergrid.ColumnSchemaFactory(columns);
factory.organize(/^(one|two|three|four|five|six|seven|eight)/i, { key: 'alias' });
var columnSchema = factory.lookup('last_name');
if (columnSchema) {
columnSchema.defaultOp = 'IN';
}
//factory.lookup('birthState').opMenu = ['>', '<'];
return factory.schema;
}
var customSchema = [
{ name: 'last_name', type: 'number', opMenu: ['=', '<', '>'], opMustBeInMenu: true },
{ name: 'total_number_of_pets_owned', type: 'number' },
{ name: 'height', type: 'number' },
'birthDate',
'birthState',
'employed',
{ name: 'income', type: 'number' },
{ name: 'travel', type: 'number' }
];
var peopleSchema = customSchema; // or try setting to derivedPeopleSchema
var gridOptions = {
data: people1,
schema: peopleSchema,
margin: { bottom: '17px' }
},
grid = window.g = new Hypergrid('div#json-example', gridOptions),
behavior = window.b = grid.behavior,
dataModel = window.m = behavior.dataModel,
idx = behavior.columnEnum;
console.log('Fields:'); console.dir(behavior.dataModel.getFields());
console.log('Headers:'); console.dir(behavior.dataModel.getHeaders());
console.log('Indexes:'); console.dir(idx);
var treeView, dataset;
function setData(data, options) {
options = options || {};
if (data === people1 || data === people2) {
options.schema = peopleSchema;
}
dataset = data;
behavior.setData(data, options);
idx = behavior.columnEnum;
}
// Preset a default dialog options object. Used by call to toggleDialog('ColumnPicker') from features/ColumnPicker.js and by toggleDialog() defined herein.
grid.setDialogOptions({
//container: document.getElementById('dialog-container'),
settings: false
});
// add a column filter subexpression containing a single condition purely for demo purposes
if (false) { // eslint-disable-line no-constant-condition
grid.getGlobalFilter().columnFilters.add({
children: [{
column: 'total_number_of_pets_owned',
operator: '=',
operand: '3'
}],
type: 'columnFilter'
});
}
window.vent = false;
//functions for showing the grouping/rollup capabilities
var rollups = window.fin.Hypergrid.analytics.util.aggregations,
aggregates = {
totalPets: rollups.sum(2),
averagePets: rollups.avg(2),
maxPets: rollups.max(2),
minPets: rollups.min(2),
firstPet: rollups.first(2),
lastPet: rollups.last(2),
stdDevPets: rollups.stddev(2)
},
groups = [idx.BIRTH_STATE, idx.LAST_NAME, idx.FIRST_NAME];
var aggView, aggViewOn = false, doAggregates = false;
function toggleAggregates() {
if (!aggView){
aggView = new AggView(grid, {});
aggView.setPipeline({ includeSorter: true, includeFilter: true });
}
if (this.checked) {
grid.setAggregateGroups(aggregates, groups);
aggViewOn = true;
} else {
grid.setAggregateGroups([], []);
aggViewOn = false;
}
}
function toggleTreeview() {
if (this.checked) {
treeView = new TreeView(grid, { treeColumn: 'State' });
treeView.setPipeline({ includeSorter: true, includeFilter: true });
treeView.setRelation(true, true);
} else {
treeView.setRelation(false);
treeView = undefined;
delete dataModel.pipeline; // restore original (shared) pipeline
behavior.setData(); // reset with original pipeline
}
}
var groupView, groupViewOn = false;
function toggleGrouping(){
if (!groupView){
groupView = new GroupView(grid, {});
groupView.setPipeline({ includeSorter: true, includeFilter: true });
}
if (this.checked){
grid.setGroups(groups);
groupViewOn = true;
} else {
grid.setGroups([]);
groupViewOn = false;
}
}
you may try:
(rollups.sum(11)).toFixed(2)
enclosing number in parentheses seems to make browser bypass the limit that identifier cannot start immediately after numeric literal
edited #2:
//all formatting and rendering per cell can be overridden in here
dataModel.getCell = function(config, rendererName) {
if(aggViewOn)
{
if(config.columnName == "total_pets")
{
if(typeof(config.value) == 'number')
{
config.value = config.value.toFixed(2);
}
else if(config.value && config.value.length == 3 && typeof(config.value[1]) == 'number')
{
config.value = config.value[1].toFixed(2);
}
}
}
return grid.cellRenderers.get(rendererName);
};

why [Circular] is getting added in the hash

here is my code
db.query(str, arr, function selectCb(error, results, fields) {
if (error) {
return proceed(false, {errno:'010',message:error.message}, request);
}
var q = async.queue(function (results, callback) {
// add the gib infor
if (results.refertype=='G') {
var input={};
input.fields="*";
input.gibname=results.refername;
gib.getgibinternal(input, makeCallback(i));
function makeCallback(index) {
return function(gresult) {
results.gib=gresult.data[0];
callback(results);
}
}
// add the user info
} else if(results.refertype=='U') {
var input={};
input.username=results.refername;
input.fields="*";
user.getuserinternal(input, makeCallbackuser(i));
function makeCallbackuser(index) {
return function(gresult) {
results.user=gresult.data[0];
callback(results);
}
}
}
}, results.length);
// assign a callback
q.drain = function() {
return proceed(true, self.results, self.request);
}
self.results=results;
for (var i=0; i<results.length; i++) {
// the first console
console.log(results[i]);
// add some items to the queue
q.push(results[i], function (results) {
results[i]=results;
self.results[i]=results;
//the second console.
console.log(results);
});
}
if (results.length==0) {
return proceed(true, results, request);
}
});
The out put of above code is :
// the first console
{ cardid: 30,
cardtype: 'I',
status: 'A',
refername: 'admin',
refertype: 'U' }
// the second console
{ '1': [Circular],
cardid: 30,
cardtype: 'I',
status: 'A',
refername: 'admin',
refertype: 'U',
user:
{ name: 'admin',
username: 'admin',
deleted: 'N' } }
how this '1': [Circular], get added .?
This bit:
q.push(results[i], function (results) {
is the same as this (with some renaming to make it easier to track the scope):
q.push(self.results[i], function(r) {
r[i] = r; // <------------------- Look at me!
self.results[i] = r;
//the second console.
console.log(r);
});
The self.results[i] change just comes from the self.results=results; right above your for loop. The interesting part is this:
r[i] = r;
If i is 1 you will have added a property named 1 to r whose value is r itself, hence the [Circular]. I would hazard a guess that results.length is 2 and that your function is acting as a closure over i and ending up with using the last value that i had and that's why you get the '1' rather than a '0' property.
I see three main Things that could be causing you trouble:
The classic closure problem with i.
Too many things were called results so it was easy to lose track of which one you were working with.
The circular reference: r[i] = r;.
Another possible source of confusion is that results and self.results are the same object but that might be okay.
Seems like it's a circular reference and console.log is muffling it. Try doing console.log(Object.keys(results['1'])); for more information on what's inside the Object 1

Categories