I am using angularFireStorage (in my Ionic app).
I am having some success, for instance, I can look at my console.log(res) to click the link in my console to view a belt image. I cannot save it to a variable however, which is the issue. Ultimately I would like to use the image tag and link the belt image using src. Here is my code:
const ref = this.storage.ref('belts/');
ref.listAll().subscribe(belt=>
belt.items.forEach(item=> printImage(item))
)
function printImage(imageRef){
let temp = imageRef.getDownloadURL();
temp.then(res=> {
console.log(res)
this.mySRCs.push(res)
})
}
and how I am testing it.
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(mySRCs[0])"/>
and the error:
Uncaught (in promise): TypeError: Cannot read property 'mySRCs' of undefined
TypeError: Cannot read property 'mySRCs' of undefined
I feel like I did something similar a month or two ago but this time I cannot see the image in my app. Thanks for your help.
I think your issue is with using the 'this' keyword within your 'printImage' function.
You either need to do:
belt.items.forEach(item=> printImage.bind(this, item))
or assuming you have a...
const mySRCs = [];
then you just pass the field as an argument to the printImage function...
belt.items.forEach(item=> printImage(item, mySRCs))
and instead of using 'this' inside the function, you use...
function printImage(imageRef, mySRCs){
let temp = imageRef.getDownloadURL();
temp.then(res=> {
console.log(res)
mySRCs.push(res) //<--- remove this
})
}
Related
const quoteText = document.querySelector("quote")
quoteBtn = document.querySelector("button")
// random quote function
function randomQuote() {
//Fetching random quote from API and parsing it into Js Object
fetch("https://api.quotable.io/random").then(res => res.json()).then(result=>{
console.log(result);
quoteText.innerText = result.content;
});
}
quoteBtn.addEventListener("click", randomQuote);
I expect it to next the quote as i am clicking on it, but rather it is displaying in the console as "Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerText')"
It looks like you are trying to fetch a random quote from an API and display it on a website when a button is clicked.
There's a syntax error in the code, the quoteBtn declaration is missing a var or const keyword, which should be fixed:
const quoteText = document.querySelector("quote");
const quoteBtn = document.querySelector("button");
Additionally, make sure that the elements with the quote and button class names actually exist in your HTML, otherwise quoteText and quoteBtn will be null and the code will throw an error when trying to add the click event listener.
If you use document.querySelector(), you need to use a class or an id, unless your target is a native html element. <quote> is not a native html element. So I guess you need to use:
const quoteText = document.querySelector(".quote")
Mind the . in document.querySelector(".quote")
TypeError: elem[prop] is not a function
E2E testing in webdriveio. I want to click a button inside an iframe.
let iframe = browser.$('#fullmessage')
browser.pause(1000)
browser.switchToFrame(iframe)
browser.setTimeout({ implicit: 10000 })
let clickAgree = $('a[class="button is-success"]')
clickAgree.click()
browser.switchToParentFrame()
browser.pause(3000)
I was facing same error and when debug more using REPL found that the issue could be due to 2 reasons:
selector is returning array of elements and so it was not able to call the method used.
the method being called on element does not supports.
For example with following code:
$('.some_class').$$('input').getValue();
was getting error - Uncaught Error: elem[prop] is not a function. Using $('.auto_test_class').$$('input')[1].getValue(); works. But its better to use some Id or xpath.
Hope this might be useful for someone facing same issue :)
Hi i faced with the same problem, but in async. The reason is that you need
to await already defined element as parameter:
get iframe() { return $('.iframe'); }
await browser.switchToFrame(await this.iframe);
Because switchToFrame works only with element, not with promise.
Maybe for someone it will be useful.
According to the documentation here, it should be possible get an id for a not-yet-created firestore document, add it the object to be saved, and then persist it like this:
// Add a new document with a generated id.
var newCityRef = db.collection("cities").doc();
// later...
newCityRef.set(data);
In my application, I follow this pattern with the following code:
async createNewProject(projectObject : Project) : Promise<boolean> {
let doc = this.firestore.collection("projects").doc();
projectObject.id = doc.ref.id;
try {
await doc.set(projectObject);
} catch(err) {
console.error(err);
return false;
}
return true;
}
When it runs though, i get an error in the console:
FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined
Can anybody shed any light? I've seen other folks on her referencing this method (using the doc method with no parameters as the solution to the problem, yet others are seeing this error. Is this some kind of API on the Angular implementation of the API, or a problem at the firebase side of things (or did I do something wrong?)
The doc() method returns a DocumentReference, which does not have a ref property but has an id one. Therefore you need to do:
projectObject.id = doc.id;
instead of
projectObject.id = doc.ref.id;
My JavaScript:
todo.completed = !todo.completed;
ERROR:
Uncaught TypeError: Cannot read property 'completed' of undefined
at Object.toggleCompleted (script.js:34)
at Object.toggleCompleted (script.js:89)
at HTMLButtonElement.onclick ((index):33)
toggleCompleted # script.js:34
toggleCompleted # script.js:89
onclick # (index):33
Am I missing something here?
It looks like you haven't declared the variable todo yet. Try something like todo = {}; Let me know if you have questions!
The variable todo has passed out of scope. It's probably declared in a function that is outside the closure of handlers.toggleCompleted() when it is called.
There are a couple of ways to fix this, but as the simplest you can just make todo global:
Find var todo and remove var from the start.
At the top of your JS add var todo = {};
This will make todo a global object that's always defined on your page.
What's so confusing about it is that the code will work in Plunkr, glitch or codepen, but not a text editor and browser, because of the way those sites's routing is set up. In your index.html file you need to replace <script src = "filename.js></script>
with
<script src="entire path to filename.js"></script>
let nasPath = "";
return getFamInfo(args.familyID)
.then(function (famInfo) {
nasPath = //some code involving famInfo here
return getSFTPConnection(config.nasSettings);
}).then(function (sftp) {
const fastPutProm = Promise.promisify(sftp.fastPut);
return fastPutProm(config.jpgDirectory, nasPath, {});
});
If I put a breakpoint after const fastPutProm = Promise.promisify(sftp.fastPut);, fastPutProm is a function with three arguments. But when I try to run this code, I get a TypeError: Cannot read property 'fastPut' of undefined error. What am I doing wrong here?
That error means that your sftp value is undefined so when you try to pass sftp.fastPut to the promisify() method, it generates an error because you're trying to reference undefined.fastPut which is a TypeError.
So, the solution is to back up a few steps and figure out why sftp doesn't have the desired value in it.
Another possibility is that the error is coming from inside the module and it's because the implementation of sftp.fastPut is referencing this which it expects to be sftp. Your method of promisifying is not preserving the value of this. You can fix that by changing your code to:
const fastPutProm = Promise.promisify(sftp.fastPut, {context: sftp});