I have some weird problems related with defintion of method inside scope. Once it's defined, and when I want to call it (just by entering it into code) it disappears. I have this part of code
if (ConfigurationService.isConfigurationChanged() === true) {
ConfigurationService.getConfiguration().then(function(data) {
$scope.configuration = data.configuration;
$scope.lunchers = data.lunchers;
$scope.configuration.vegies.all_in_one_group = data.configuration.vegies.all_in_one_group;
var lunchersLength = data.lunchers.all.length;
for (var i = 0; i < lunchersLength; i++) {
$scope.selectedVegies[i] = $scope.isVegie(data.lunchers.all[i]);
$scope.selectedSpecialGroup[i] = $scope.isInSpecialGroup(data.lunchers.all[i]);
$scope.isAbsent[i] = $scope.isAbsent(data.lunchers.all[i]);
}
});
} else if (ConfigurationService.isConfigurationChanged() === false) {
var cached = ConfigurationService.getCachedConfiguration();
console.log($scope.isVegie);
$scope.configuration = cached.configuration;
$scope.lunchers = cached.lunchers;
$scope.configuration.vegies.all_in_one_group = cached.configuration.vegies.all_in_one_group;
var lunchersLength = cached.lunchers.all.length;
for (var j = 0; j < lunchersLength; j++) {
$scope.selectedVegies[i] = $scope.isVegie(cached.lunchers.all[j]);
//$scope.selectedSpecialGroup[i] = $scope.isInSpecialGroup(cached.lunchers.all[i]);
//$scope.isAbsent[i] = $scope.isAbsent(cached.lunchers.all[i]);
}
}
Now something weird happens. Can you see:
console.log($scope.isVegie);
When I have:
$scope.selectedVegies[i] = $scope.isVegie(cached.lunchers.all[j]);
commented I can see method in firebug, when I uncomment it, it gets undefined...
Anybody had some similar issues?
Note:
ConfigurationService.getConfiguration()
Is this method:
getConfiguration : function() {
var deferred = $q.defer();
$http({
method :'GET',
url : "cgi-bin/get_configuration.py"
})
.success(function(data, status, headers, config) {
if (status === 200) {
angular.copy(data, configStatus.currentConfig);// = data;
configStatus.configurationChanged = false;
deferred.resolve(data);
}
})
.error(function(data, status, headers, config) {
console.log(data);
console.log(status);
deferred.reject(data);
});
return deferred.promise;
},
Found the issue. The thing is that
$scope.isVegie
was defined after the logic calling it. However, I didn't noticed that when I didn't have else part. When it was without if-else, it was working fine even though method was defined "under" the logic calling it.
This solved the issue.
Related
Im trying to implement the XLS Extension. In the ModelData class, i cannot get objects leaf nodes because the viewer is undefined.
Here is the problematic method:
getAllLeafComponents(callback) {
// from https://learnforge.autodesk.io/#/viewer/extensions/panel?id=enumerate-leaf-nodes
viewer.getObjectTree(function (tree) {
let leaves = [];
tree.enumNodeChildren(tree.getRootId(), function (dbId) {
if (tree.getChildCount(dbId) === 0) {
leaves.push(dbId);
}
}, true);
callback(leaves);
});
}
Im getting Cannot read properties of undefined (reading 'getObjectTree') , meaning viewer is undefined.
However, viewer is working and displaying documents.
I tried to call it by window.viewer and this.viewer to no avail.
Thanks in advance for any help
It looks like it missed two lines. Could you try the revised one below?
// Model data in format for charts
class ModelData {
constructor(viewer) {
this._modelData = {};
this._viewer = viewer;
}
init(callback) {
var _this = this;
var viewer = _this._viewer;
_this.getAllLeafComponents(function (dbIds) {
var count = dbIds.length;
dbIds.forEach(function (dbId) {
viewer.getProperties(dbId, function (props) {
props.properties.forEach(function (prop) {
if (!isNaN(prop.displayValue)) return; // let's not categorize properties that store numbers
// some adjustments for revit:
prop.displayValue = prop.displayValue.replace('Revit ', ''); // remove this Revit prefix
if (prop.displayValue.indexOf('<') == 0) return; // skip categories that start with <
// ok, now let's organize the data into this hash table
if (_this._modelData[prop.displayName] == null) _this._modelData[prop.displayName] = {};
if (_this._modelData[prop.displayName][prop.displayValue] == null) _this._modelData[prop.displayName][prop.displayValue] = [];
_this._modelData[prop.displayName][prop.displayValue].push(dbId);
})
if ((--count) == 0) callback();
});
})
})
}
getAllLeafComponents(callback) {
var _this = this;
var viewer = _this._viewer;
// from https://learnforge.autodesk.io/#/viewer/extensions/panel?id=enumerate-leaf-nodes
viewer.getObjectTree(function (tree) {
var leaves = [];
tree.enumNodeChildren(tree.getRootId(), function (dbId) {
if (tree.getChildCount(dbId) === 0) {
leaves.push(dbId);
}
}, true);
callback(leaves);
});
}
hasProperty(propertyName){
return (this._modelData[propertyName] !== undefined);
}
getLabels(propertyName) {
return Object.keys(this._modelData[propertyName]);
}
getCountInstances(propertyName) {
return Object.keys(this._modelData[propertyName]).map(key => this._modelData[propertyName][key].length);
}
getIds(propertyName, propertyValue) {
return this._modelData[propertyName][propertyValue];
}
}
I was wondering if you could help.
I have the below code which sets a timeout delay before making a http request. The watch is bound to a input box. This is currently in my controller and it works.
$scope.$watch('query.keyword',function($http){
var searchInput = document.getElementById('searchInput').value;
var minLength = 3;
var req;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function(){
var newValue = searchInput;
if(newValue !== null && newValue.length > minLength) {
window.alert(newValue);
req = {
method: 'SET',
url: ''
};
}
}, 3000);
return $http(req);
});
Now I want this as a factory/service to call upon rather than listing it in my controller.
I then made this...
app.factory('sendSearchData', function($http) {
var searchInput = document.getElementById('searchInput').value;
var minLength = 3;
var req = null;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function(){
var newValue = searchInput;
if(newValue !== null && newValue.length > minLength) {
window.alert(newValue);
req = {
method: 'SET',
url: 'haha.php'
};
}
}, 3000);
return function() {
if($http !== null) {
return $http(req);
} else { return 0; }
};
});
Not sure if the return is right, as the previous return was flagging up a http null error.
So to use it I've done a few variations of the below code in my controller.
$scope.$watch('query.keyword', sendSearchData.success());
But I am having no luck and it's refusing to render.
Can anyone help?
In order to try and get around the odd issue in having with CORS (here) I am attempting to reload any images loaded via canvas.loadFromJSON()
But, I am experiencing weird issues. Sometimes only one image is replaced, other times I get duplicates of one image.
Here is my code:
canvas.loadFromJSON(<?php echo json_encode($objects); ?>, function() {
var objArray = canvas.getObjects();
for (var i = 0; i < objArray.length; i++) {
canvas.setActiveObject(objArray[i]);
var activeObject = canvas.getActiveObject();
if(activeObject.type === 'image') {
fabric.util.loadImage(activeObject.src, function(img) {
var object = new fabric.Image(img);
object.hasControls = true;
object.lockUniScaling = true;
object.scaleX = activeObject.scaleX;
object.scaleY = activeObject.scaleY;
object.originX = activeObject.originX;
object.originY = activeObject.originY;
object.centeredRotation = true;
object.centeredScaling = true;
canvas.add(object);
}, null, {crossOrigin: 'Anonymous'});
canvas.remove(activeObject);
}
activeObject.setCoords();
}
canvas.deactivateAll();
canvas.renderAll();
canvas.calcOffset();
});
Any ideas why I'm getting these weird issues?
First glance at your code I don't see anything wrong... But I'm also thinking the code might be a bit inefficient? Is there a need to create a new image instance?
I believe you should be able to just set the crossOrigin property on the image object.
This code is untested, but I'd try something like this:
canvas.loadFromJSON(<?php echo json_encode($objects); ?>, function() {
var objArray = canvas.getObjects();
for (var i = 0; i < objArray.length; i++) {
canvas.setActiveObject(objArray[i]);
var activeObject = canvas.getActiveObject();
if(activeObject.type === 'image') {
activeObject.crossOrigin = 'Anonymous';
}
}
canvas.deactivateAll();
canvas.renderAll();
canvas.calcOffset();
});
I had the same problem and overcome it downloading again the image then reassign it to object._element once each fabric object was created using loadFromJSON.
export const getImage = url => {
return new Promise((resolve, reject) => {
let img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
});
}
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), async (o, object) => {
if (object.type === "image") {
let imagecore = await getImage(object.src);
object._element = imagecore;
}
});
I want to make a dynamic graph based on a json file. I have seen many examples with tsv but I donot how to convert it to json.
That is the part that I want to change from tsv to json but I donot know how!
d3.tsv("data/data.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
when I use
d3.json("data/data.json", function(data) {
data.forEach(function d) {
d.date = parseDate(d.date);
d.close = +d.close;
}
});
it gives this error: Uncaught type error: cannot call method 'forEach' of undefined!
Thanks for your suggestions :)
try to do something like this
d3.json("data/data.json", function(data) {
data.forEach(function d) {
d.date = parseDate(d.date);
d.close = +d.close;
}
});
d3.js have support for json, https://github.com/mbostock/d3/wiki/Requests
The syntax around your forEach is a little off; try this instead:
d3.json("data/data.json", function(data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
});
(As Felix points out, this will only work if your JSON object is defined and is an array)
Here a small code where you'll be able to convert tsv to json. It could help you...
ps : here is typescript, but you can easily convert it to vanilla javascript ;)
// Set bunch of datas into format object
tsvToJson(datas: string): Array<Object>{
// Separate each lines
let array_datas = datas.split(/\r\n|\r|\n/g);
// Separate each values into each lines
var detailed_datas = [];
for(var i = 0; i < array_datas.length; i++){
detailed_datas.push(array_datas[i].split("\t"));
}
// Create index
var index = [];
var last_index = ""; // If the index we're reading is equal to "", it mean it might be an array so we take the last index
for(var i = 0; i < detailed_datas[0].length; i++){
if(detailed_datas[0][i] == "") index.push(last_index);
else {
index.push(detailed_datas[0][i]);
last_index = detailed_datas[0][i];
}
}
// Separate data from index
detailed_datas.splice(0, 1);
// Format data
var formated_datas = [];
for(var i = 0; i < detailed_datas.length; i++){
var row = {};
for(var j = 0; j < detailed_datas[i].length; j++){
// Check if value is empty
if(detailed_datas[i][j] != ""){
if(typeof row[index[j]] == "object"){
// it's already set as an array
row[index[j]].push(detailed_datas[i][j]);
} else if(row[index[j]] != undefined){
// Already have a value, so it might be an array
row[index[j]] = [row[index[j]], detailed_datas[i][j]];
} else {
// It's empty for now, so let's say first that it's a string
row[index[j]] = detailed_datas[i][j];
}
}
}
formated_datas.push(row);
}
console.log(formated_datas); // #TODO : remove this
return formated_datas;
}
I transpile and resume Wetteren's code:
convertTSVtoJSON(tsvData) {
const formattedData = tsvData.split(/\r\n|\r|\n/g).filter(e => !!e).map((parsedEntry) => parsedEntry.split("\t"));
const tsvHeaders = formattedData.shift();
return formattedData.map(formattedEntry => {
{
return tsvHeaders.reduce((jsonObject, heading, position) => {
jsonObject[heading] = formattedEntry[position];
return jsonObject;
}, {});
}
});
}
I am trying to make a computed column on data returned via JSON. I cannot get it to work. I either get a NAN value or it says the column does not exist.
javascript:
function commissionsViewModel() {
var self = this;
self.commissions = ko.observableArray();
ko.applyBindings(self, $("#commissions").get(0));
function LoadcommissionsFromServer() {
$.post(
'/commissions/data',
function (data) {
var results = ko.observableArray();
ko.mapping.fromJS(data, {}, results);
for (var i = 0; i < results().length; i++) {
self.commissions.push(results()[i]);
};
},
'json'
)
}
LoadcommissionsFromServer();
self.ComissionAmount = ko.computed(
function () {
return this.CommissionableAmount * this.Rate * this.Modifier;
});
return self;
}
var viewModel = commissionsViewModel();
What I am trying to accomplish is for it to recalculate the CommissionAmount after I change the modifier or rate.
EDIT
If I manually map the fields I get the NaN
function Commission(data) {
this.Status = ko.observable(data.Status);
this.OriginalCommissionCode = ko.observable(data.OriginalCommissionCode);
this.NewCommissionCode = ko.observable(data.NewCommissionCode);
this.InvoiceNumber = ko.observable(data.InvoiceNumber);
this.CustomerID = ko.observable(data.CustomerID);
this.CommissionableAmount = ko.observable(data.CommissionableAmount);
this.Modifier = ko.observable(data.Modifier);
this.Rate = ko.observable(data.Rate);
this.SalesAmount = ko.observable(data.SalesAmount);
this.NonSalesAmount = ko.observable(data.NonSalesAmount);
this.CommissionAmount = ko.computed(function () {
return this.CommissionableAmount * this.Rate * this.Modifier;
});
}
function commissionsViewModel() {
var self = this;
self.commissions = ko.observableArray();
$.post(
'/commissions/data',
function (allData) {
var mappedTasks = $.map(allData, function (item) { return new Commission(item) });
self.commissions(mappedTasks);
},
'json'
);
}
ko.applyBindings(new commissionsViewModel());
I assume Rate and Modifier are observables (You didn't provide their declaration) so you need to use the this.Rate() and this.Modififer() notations. They are functions, not properties.