I am developing a web application using Angular 8. I just want to access the exif data of an input image outside the getData method by assigning the obtained data to a global variable. If i tried to access the global variable after executing function it is showing undefined.
here is the function for extracting the exif data:
photodata: any; // global variable
getPhotodata(file) {
EXIF.getData(file, function() {
const data = EXIF.getAllTags(this);
console.log(data); // working
console.log(data.Make); // working
console.log(data.Model); // working
console.log(data.DateTimeOriginal); // working
this.photodata = data;
console.log(this.photodata) // working
});
}
console.log(this.photodata) // here it is showing undefined
i have tried to return the data. But it also does not worked
getPhotodata(file) {
EXIF.getData(file, function() {
const data = EXIF.getAllTags(this);
console.log(data); // working
console.log(data.Make); // working
console.log(data.Model); // working
console.log(data.DateTimeOriginal); // working
return data;
});
}
console.log(getPhotodata(file)) // undefined
I'm aware you probably solved this by now, but in case async programming got you curious, you might enjoy my library exifr. I've written it because exif-js is effectively dead now (not maintained for over 2 years), it's pretty ineffective. Exifr is built around promises and async/await syntax, so you can do this:
async function getExif() {
let output = await exifr.parse(file)
console.log(data.Make)
console.log(data.Model)
}
You can also try out the library's playground and experiment with images and their output, or check out the repository and docs.
Related
a piece of my code
const channels = fauna.paginate(q.Match(q.Index("channels"), "true")) // Query FaunaDB database for channel list => create constant called users containing results
const channelList = channels.each(function (page) {
// Logs the page's contents,
// for example: [ Ref(Collection("test"), "1234"), ... ]
console.log(page);
});
works fine and behaves how it supposed to. however, when I try to call "channelList" from elsewhere in my code it returns {}
The console.log in the first piece of code returns what it is supposed to as well so I dont think there is anything wrong with the first chunk of code.
Here is a piece of code where I attempt to call this object
let options = {
options: {
debug: config.twitchConfig.options.debug
},
connection: {
reconnect: config.twitchConfig.options.reconnect,
secure: config.twitchConfig.options.secure
},
identity: {
username: config.twitchConfig.connection.username,
password: config.twitchConfig.connection.password
},
channels: [JSON.stringify(channelList)] // Attempt to call here, Returns {} (Empty object)
};
Is there something I'm missing? is this even possible in the first place? if its not possible whats another method i can use to achieve the same result?
Edit: From what I can gather, channelList is based off of the page response, and it seems like the page response is private to that function and cannot be referenced outside of the function. what can I do to either make it referencable outside of the function or create a constant/variable that can be accessed outside of the function containing the same information
channelList is not a function, more like it is the result of a function that prints the channels.. so after printing what is assigned to it is the result..
Try assuming it as a function and then invoking it:
const channelList = ()=>{
channels.each(function (page) {
// Logs the page's contents,
// for example: [ Ref(Collection("test"), "1234"), ... ]
console.log(page);
});
};
channelList();
Assuming the code itself does what you want it to, this should do the job
After much trial and error my answer was way simpler than me or anyone else I have spoken to thought.
Here's a step by step guide on how to fix the problem yourself if you're experiencing the same issue as I was.
Use a variable instead of a constant
declare your variable before setting it by placing var channelList; somewhere above your code that sets it
set the previously declared variable with a simple channelList = page
console.log(channelList); just to make sure its all working
Finally, call the variable where you want it, and voila! you have your variable properly called and it doesn't return {} or Undefined or [Object Object]
after pasting the given data of my database, doing
firebase.initializeApp(firebaseConfig);
window.db = firebase.database().ref();
window.db.once('value', snap => data = snap.val());
console.log(data);
retrieves correctly the data and its shown as i want, but making a function on a index.js
function extend(){
window.db.once('value', snap => data = snap.val());
console.log(data);
}
extend();
gives me this error
Uncaught ReferenceError: data is not defined
at extend (index.js:59)
at index.js:61
I dont get why it would work outside the function and not inside, given that window.db is a global instance, i've tried a couple of ways differently without success, would somebody help me? :)
The variable data is not defined in the extend() function (unless it's some global variable, extend()). You'll get better results if you refactor your code like so:
// Define the local variable
function extend(){
window.db.once('value', snap => {
let data = snap.val();
console.log(data);
});
}
extend();
I am trying to create a library for a project, its like this:
module.exports = Diary;
function Diary() {
someFunction = function( message ) {
console.log(message)
}
function D() {
return new D._Section;
}
D.about = {
version: 1.0
};
D.toString = function () {
return "Diary "+ D.about.version;
};
var Section = function () {
this.Pages = []
}
D._Section = Section;
//to extend the library for plugins usage
D.fn = sectionproto = Section.prototype = D.prototype;
sectionproto.addPage = function (data) {
this.Pages.push(data)
conole.log(this.Pages)
};
return D;
};
main purpose for this is to use same library for server side and client side operations, so we can have same code base.
this issue is that when i use this in node app
var Diary = require('./diary.js');
var myDiary = new Diary();
console.log(myDiary.addPage('some text on page'))
and run it, it throws an error
TypeError: myDiary.addPage is not a function
i am not not sure what to do here to make this work for node js, as our client app is very huge and making changes to it would require some effort if we have to go in some other pattern.
First Question is:
1. is this approach right or we need to look in to something else
2. if this can work on node js app then how with minimum changes to library
The main problem is that you're exporting your overall Diary function, but then using it as though you'd received its return value (the D function) instead.
The way you're exporting it, you'd use it like this:
var Diary = require('./diary.js')();
// Note -------------------------^^
var myDiary = new Diary();
But beware that that means every import will create its own D function and associated things.
Alternately, export the result of calling Diary, but then the Diary function has no purpose.
Other issues are:
You're falling prey to The Horror of Implicit Globals* by not declaring someFunction or sectionproto. Be sure to declare your variables.
The structure is over-complicated without any obvious reason it needs to be so complicated.
* (disclosure: that's a post on my anemic little blog)
Problem: I'm trying to get some data from a server to populate a cytoscape graph. When i access the scope from javascript its undefined.
Despite their being quite a few posts with this / similar issue. I'm having trouble finding an explanation about how to get round the problem of accessing the scope from a javascript file, once the data is ready (if that is the problem im having).
I read that http.get methods are asynchronous? so they don't block anything after from executing. I guess this is what is causing an undefined error when i'm accessing the scope because the data hasn't returned yet? I've found some info on this but can't figure out what to use to get round the problem. I can access the data in the usual way in HTML with the angular curly braces and it works. It also works when i just return some data from the controller.
If anyone can point me in the right direction i'd really appreciate it.
This is javascript file im trying to run which grabs the scope and adds nodes to a cytoscape graph.
<script type="text/javascript">
window.onload = function() {
nodes = angular.element(document.querySelector('[ng-controller="DataController"]')).scope().nodes;
alert(nodes);
cy.add(nodes);
}
</script>
2. which calls a factory method from the controller.
dataFactory.getNodes().then(function(data)
{
$scope.nodes = data;
});
3. http.get from the factory
_service.getNodes = function()
{
return $http.get(urlBase + "/nodes");
};
4. node.js returns some 'nodes' to add to the cytoscape graph
router.get('/api/data/nodes', function(req, res) {
console.log('sending some data');
var data = [
...
];
res.status(200).json(data);
});
I've seen "promises" mentioned so i guess i'll be heading in that direction next...
Thanks
You are trying to alert the value of nodes when the DOM is loaded (window.onload) and the data from the service is not yet returned.
Your controller is already uses a promise, and the data is binded to the scope when the promise is resolved.
.then(function(data){
...
});
If you specifically want to access the data from an external js script, you can simply call the function from the controller:
script
<script type="text/javascript">
function alertNodes() {
nodes = angular.element(document.querySelector('[ng-controller="DataController"]')).scope().nodes;
alert(nodes);
cy.add(nodes);
}
</script>
controller
dataFactory.getNodes().then(function(data){
//$scope.nodes = data;
alertNodes()
});
I am using meteor,
and I have a handlebar tag in my html
{{displayResult}}
in my client side JS file I write the helpers and stub method like this
Helper Function
*EDIT*
displayResult:function(){
var abc;
var apiResultDependency = new Deps.Dependency();
Meteor.call('apiresult',function(e,result){
abc=result;
apiResultDependency.changed();
});
console.log(abc);
console.log(result);
apiResultDependency.depend();
return abc;//returning nothing
}
Stub Method
Meteor.startup(function(){
return Meteor.methods({
apiresult:function(){
console.log("loading...");
}
});
});
and my server code connecting with one API and delaying results, my code is
apiresult:function(){
var response = returnAllResult();//this gets the result from outside func. working good
return response;
}
I want to take the result from server side function and I want to display in the html file
how to receive and display it. I'm not getting anything in my webpage. In my console it is printing the results.
The problem is that your template does not rerender when the data arrives from the server. The easiest way to solve this is to use reactive datasource pattern (look here), so in your client side code you would need to add something like:
var apiResultDependency = new Deps.Dependency();
var abc;
and your helper may look like this:
displayResult: function() {
if (abc === undefined) {
Meteor.call('apiresult', function(e,result) {
abc = result; // make sure this is not undefined to prevent infinite loop
apiResultDependency.changed();
});
}
apiResultDependency.depend();
return abc;
}