Hello everyone. I want to get API data and set to localStorage(after convert image from the server to base64). When I get data from API, I create a simple loop for update image URL to base64 format but this.users[key].picture["large"] = dataUrl;
don’t work. Because of dataUrl
value don’t work outside of a function.
How can I update the row object?
What can I do?
this.http.get<User[]>('https://randomuser.me/api?result=100').subscribe(data => {
this.users = data['results'];
for (let key in this.users) {
let value = this.users[key].picture["large"];
this.toDataURL('//cors-anywhere.herokuapp.com/' + value)
.then((dataUrl) => {
this.users[key].picture["large"] = dataUrl;
});
}
this.storage.set('users', "");//clear
this.storage.set('users', this.users);
console.log(this.users);
});
my toDataUrl function:
public toDataURL(url) {
return fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
}));
}