Develop Reference

Foreach for array

I have an array which I populate like so
var list = [];
featureLayer.queryFeatures(querySnTR)
.then((result) => {
result.attachmentInfos.forEach((x) => {
list.push(uriString + "/" + x.id);
});
});
console.log("list", list);
I print out the list with console.log and it returns values inside.
Afterwards I do a foreach to go through all the elements inside and create a div for each of them. The thing is, it doesn't even go in the foreach function.
list.forEach((x) => {
console.log("CL", list);
console.log("x element", x);
var image = document.createElement("img");
image.src = x;
image.className = "queryImg";
document.getElementById("queryResults").appendChild(image);
});
It doesn't print out CL or x element for that matter.
Any ideas as to why?
The whole original code, for reference
startup: function () {
var _that = this;
_this = _that;
this.map.on("click", function (e) {
_this.map.graphics.clear();
identifyTask = new IdentifyTask("https://server/arcgis/rest/services/MUNICIPALITY_BUNDLE/ZK_KATASTAR_NA_ZELENILO/MapServer");
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 10;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [1];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = _this.map.width;
identifyParams.height = _this.map.height;
identifyParams.spatialReference = _this.map.spatialReference;
identifyParams.geometry = e.mapPoint;
identifyParams.mapExtent = _this.map.extent;
identifyTask.execute(identifyParams).then(function (data) {
objId = data[0].feature.attributes.objectid;
const querySnTR = {
where: "1 = 1",
outFields: ["*"]
};
var uriString = "https://server/arcgis/rest/services/MUNICIPALITY_BUNDLE/ZK_KATASTAR_NA_ZELENILO/MapServer/101/" + objId + "/attachments";
var featureLayer = new esri.layers.FeatureLayer(uriString);
featureLayer.queryFeatures(querySnTR)
.then((result) => {
result.attachmentInfos.forEach((x) => {
list.push(uriString + "/" + x.id);
});
});
const myFunction = async () => {
const { attachmentInfos } = await featureLayer.queryFeatures(querySnTR);
const list = attachmentInfos.map(({ id }) => `${uriString}/${id}`);
console.log("list", list);
list.forEach((x) => {
var image = document.createElement("img");
image.src = x;
image.className = "queryImg";
document.getElementById("queryResults").appendChild(image);
});
};
});
});
}

That's a trick on how the console works.
When you are executing the log the list is empty (100% sure) because you are populating it asynchronously. But the console has the reference to it and it will print it afterwards.
That's why your list is empty. You need to handle asynchrony here. You could work with an async/await approach or using promises, that will depend on the rest of your code, this is an example of how to do it with an async function (and rewritted it to modern javascript):
const myFunction = async () => {
const {attachmentInfos} = await featureLayer.queryFeatures(querySnTR);
const list = attachmentInfos.map(({id}) => `${uriString}/${id}`);
console.log("list", list);
list.forEach((x) => {
// put your code here
});
};
Edited:
Now that you share all your code you can simply do:
featureLayer.queryFeatures(querySnTR)
.then((result) => {
result.attachmentInfos.forEach((attachmentInfo) => {
var x = uriString + "/" + attachmentInfo.id
var image = document.createElement("img");
image.src = x;
image.className = "queryImg";
document.getElementById("queryResults").appendChild(image);
});
});
I would recommend you also to give vars meaningful names, not x but attachmentInfo, etc...

high quality media recorder from canvas 30 fps at 1080p

I have a canvas app that currently captures images of the canvas and compiles a video that is sent to ffmpeg which then outputs the video format of their choice. The problem is its super slow! Not on the video conversion but on the compiling of the actual frames, you see I have to pause the video and the animation and take a screenshot of the canvas. So rather than taking screenshots I was thinking about using MediaRecorder and canvas.captureStream. I am able to get video output but the quality is really low and the video keeps droping frames. I need to have the frame rate be at least 30 fps or higher and the quality be high. Heres my record function
async [RECORD] ({state}) {
state.videoOutputURL = null;
state.outputVideo = document.createElement("video");
const videoStream = state.canvas.captureStream(30);
const mediaRecorder = new MediaRecorder(videoStream);
mediaRecorder.ondataavailable = function(e) {
state.captures.push(e.data);
};
mediaRecorder.onstop = function(e) {
const blob = new Blob(state.captures);
state.captures = [];
const videoURL = URL.createObjectURL(blob);
state.outputVideo.src = videoURL;
state.outputVideo.width = 1280;
state.outputVideo.height = 720;
document.body.append(state.outputVideo);
};
mediaRecorder.start();
state.anim.start();
state.video.play();
lottie.play();
state.video.addEventListener("ended", async () => {
mediaRecorder.stop();
});
}

The best way I found to do this was to actually pause the video on a canvas and use canvas.toDataURL to take screenshots. I compile the screenshots into a video with a library called Whammy and send that over to FFmpeg to rip the final content. The following code should give a pretty good idea
async [TAKE_SCREENSHOT]({ state, dispatch }) {
let seekResolve;
if (!state.ended && state.video) {
state.video.addEventListener("seeked", async () => {
if (seekResolve) seekResolve();
});
await new Promise(async (resolve, reject) => {
if (state.animations.length) {
dispatch(PAUSE_LOTTIES);
}
dispatch(PAUSE_VIDEO);
await new Promise(r => (seekResolve = r));
if (state.layer) {
state.layer.draw();
}
if (state.canvas) {
state.captures.push(state.canvas.toDataURL("image/webp"));
}
resolve();
dispatch(TAKE_SCREENSHOT);
});
}
},
async [PAUSE_VIDEO]({ state, dispatch, commit }) {
state.video.pause();
const oneFrame = 1 / 30;
if (state.video.currentTime + oneFrame < state.video.duration) {
state.video.currentTime += oneFrame;
const percent = `${Math.round(
(state.video.currentTime / state.video.duration) * 100
)}%`;
commit(SET_MODAL_STATUS, percent);
} else {
commit(SET_MODAL_STATUS, "Uploading your video");
state.video.play();
state.ended = true;
await dispatch(GENERATE_VIDEO);
}
},
async [PAUSE_LOTTIES]({ state }) {
for (let i = 0; i < state.animations.length; i++) {
let step = 0;
let animation = state.animations[i].lottie;
if (animation.currentFrame <= animation.totalFrames) {
step = animation.currentFrame + 1;
}
await lottie.goToAndStop(step, true, animation.name);
}
},
async [GENERATE_VIDEO]({ state, rootState, dispatch, commit }) {
let status;
state.editingZoom = null;
const username =
rootState.user.currentUser.username;
const email = rootState.user.currentUser.email || rootState.user.guestEmail;
const name = rootState.user.currentUser.firstName || "guest";
const s3Id = rootState.templates.currentVideo.stock_s3_id || state.s3Id;
const type = rootState.dataClay.fileFormat || state.type;
const vid = new Whammy.fromImageArray(state.captures, 30);
vid.lastModifiedDate = new Date();
vid.name = "canvasVideo.webm";
const data = new FormData();
const id = `${username}_${new Date().getTime()}`;
data.append("id", id);
data.append("upload", vid);
let projectId,
fileName,
matrix = null;
if (!state.editorMode) {
projectId = await dispatch(INSERT_PROJECT);
fileName = `${rootState.dataClay.projectName}.${type}`;
matrix = rootState.dataClay.matrix[0];
} else {
matrix = rootState.canvasSidebarMenu.selectedDisplay;
projectId = id;
fileName = `${id}.${type}`;
}
if (projectId || state.editorMode) {
await dispatch(UPLOAD_TEMP_FILE, data);
const key = await dispatch(CONVERT_FILE_TYPE, {
id,
username,
type,
projectId,
matrix,
name,
email,
editorMode: state.editorMode
});
const role = rootState.user.currentUser.role;
state.file = `/api/files/${key}`;
let message;
let title = "Your video is ready";
status = "rendered";
if (!key) {
status = "failed";
message =
"<p class='error'>Error processing video! If error continues please contact Creative Group. We are sorry for any inconvenience.</p>";
title = "Error!";
} else if (!rootState.user.currentUser.id) {
message = `<p>Your video is ready. Signup for more great content!</p> <a href="${
state.file
}" download="${fileName}" class="btn btn-primary btn-block">Download</a>`;
} else if (role != "banner") {
message = `<p>Your video is ready.</p> <a href="${
state.file
}" download="${fileName}" class="btn btn-primary btn-block">Download</a>`;
} else {
message = `<p>Your video is ready. You may download your file from your banner account</p>`;
await dispatch(EXPORT_TO_BANNER, {
s3Id,
fileUrl: key,
extension: `.${type}`,
resolution: matrix
});
}
if (state.editorMode) {
await dispatch(SAVE_CANVAS, { status, fileId: projectId });
}
state.video.loop = "loop";
state.anim.stop();
state.video.pause();
lottie.unfreeze();
await dispatch(DELETE_PROJECT_IN_PROGRESS);
commit(RESET_PROJECT_IN_PROGRESS);
commit(RESET_CANVAS);
if (rootState.user.currentUser.id) {
router.push("/account/projects");
} else {
router.push("/pricing");
}
dispatch(SHOW_MODAL, {
name: "message",
title,
message
});
} else {
await dispatch(FETCH_ALL_PUBLISHED_TEMPLATES);
await dispatch(DELETE_PROJECT_IN_PROGRESS);
commit(RESET_PROJECT_IN_PROGRESS);
commit(RESET_CANVAS);
}
},

How do I delete all records in IndexedDB

I have an IndexedDB where I store all cart orders. On checkout, the cart needs to be clear. I'm trying to loop through each order and delete, but somehow, only the first order gets deleted. Here is my code:
const clear_cart = () => {
let objectCart = db.transaction('cart').objectStore('cart');
objectCart.openCursor().onsuccess = function(e){
let cursor = e.target.result;
if(cursor){
let cartId = cursor.value.id;
let transaction = db.transaction(['cart'], 'readwrite');
let objectToDelete = transaction.objectStore('cart');
let request = objectCart.objectToDelete(cartId);
transaction.oncomplete = () => {
console.log(`cart ${cartId} is deleted!`);
}
cursor.continue();
}
}
}

I made some tweaks to the suggestion of dmigo and this solved my problem. Here is the code
const clear_cart = () => {
let objectCart = db.transaction('cart').objectStore('cart');
let transaction = db.transaction(['cart'], 'readwrite');
let objectToDelete = transaction.objectStore('cart');
objectToDelete.clear().onsuccess = function(e){
console.log(`the cart is clear!`);
}
}

I would try the clear method of the objectStore.
const clear_cart = () => {
let objectCart = db.transaction(['cart'], 'readwrite').objectStore('cart');
objectCart.clear().onsuccess = function(e){
console.log(`the cart is clear!`);
}
}

return a response from an async call in a standard for loop

After reading How do I return the response from an asynchronous call? by Felix Kling, I am still confused about how I can return a value from an asynchronous callback.
My goal: convert a static image to base64 once and store that image in indexDB until indexDB throws some kind of storage error.
I am using this async idb npm module
// init the idb store
const initIDB = async () => {
const db = await openDB('db', 1, {
upgrade(db) {
db.createObjectStore('tempStore', { keyPath: 'id', autoIncrement: true });
},
});
const tx = db.transaction('tempStore', 'readwrite');
await overloadIDB(tx.store);
await tx.done;
return true;
};
// random number generator
const getRandomArbitrary = (min, max) => Math.random() * (max - min) + min;
// function will overload the idb
const overloadIDB = async (store) => {
const imgurl = "someLocalImage.png";
const promises = [];
return toDataURL(imgurl, async (s) => {
for (let i = 0; i < 10; i++) {
if (i > 0 && i % 100 === 0) console.log('A set done');
try {
const num = Math.round(getRandomArbitrary(1, 1000000));
const data = {
id: num,
img: s,
};
store.add(data);
} catch (e) {
console.log(e.toString());
console.dir(e);
break;
}
}
console.log('Done');
});
};
// convert image to base64
const toDataURL = (url, callback) => {
const xhr = new XMLHttpRequest();
xhr.onload = () => {
const reader = new FileReader();
reader.onloadend = () => {
callback(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
};
Ideally, I would like to return the value from the toDataURL's callback function and use that result in the for loop but I always get undefined which makes sense due to asynchronous behaviour.
The above code fails to execute the transaction store.add(data) multiple times and fails when i = 0.
I have tried wrapping toDataURL with a new Promise(resolve, reject) like so
const toDataURL = (url, callback) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.onload = () => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(callback(reader.result));
};
reader.readAsDataURL(xhr.response);
};
xhr.send();
});
and then using Promise.all to resolve an array of stores like so
const overloadIDB = async (store) => {
const imgurl = 'someLocalImage.png';
const promises = [];
return toDataURL(imgurl, async (s) => {
console.log('s :', s);
for (let i = 0; i < 10; i++) {
if (i > 0 && i % 100 === 0) console.log('A set done');
try {
const num = Math.round(getRandomArbitrary(1, 1000000));
const data = {
id: num,
img: s,
};
promises.push(store.add(data));
} catch (e) {
console.log(e.toString());
console.dir(e);
break;
}
}
await Promise.all(promises);
console.log('Done');
});
};
but returns an error Failed to execute 'add' on 'IDBObjectStore': The transaction has finished.
At this point I think I my approach is flawed but I am not sure how I can fix it. Can anyone point to some solution please?

You cannot perform async operations in the middle of indexedDB operations. Perform your fetch entirely, then connect, create a transaction, and store the result.

What in this IndexedDB code is causing the device storage to fill up to 1.6GB?

Our application that utilizes IndexedDB to track tallies of data over periods of time. In using the app for a number of months, it seems that there is some sort of storage leak causing a relatively small amount of data to require 1.6 GB of storage on the device?
The app has a feature to download its full data as a ZIP file, and that file is under 50KB. So there must be a long-term leak somewhere. What we're trying now is to download the data, clear storage, and re-import to track down where this leak might be.
However, looking at the following code that interacts with IndexedDB, it's not obvious to me where that leak may be:
// Initializing the Database
if(!dbengine){
dbengine = this;
var request = window.indexedDB.open("DB", 1);
request.onerror = function(event) {
throw new Error("Error opening indexedDb")
};
// This creates the schema the first time around
request.onupgradeneeded = (event) => {
event.target.result.createObjectStore("db", { keyPath: 'id' });
};
request.onsuccess = (event) => {
dbengine.db = event.target.result;
var dbReadyEvent = new CustomEvent('db-ready', {});
document.dispatchEvent(dbReadyEvent);
dbengine.db.onerror = function(event) {
throw new Error("Database error: " + event.target.errorCode);
};
dbengine.db.onabort = function(event) {
throw new Error("Database aborted: " + event.target.error);
// This is the error that is being called for us - QuotaExceededError
};
};
}// if !dbengine
var initialTransaction = dbengine.db.transaction(['db'], 'readwrite');
initialTransaction.onabort = (event) => {
var error = event.target.error; // DOMError
alert(error.name);
} // onabort
initialTransaction.objectStore('db').openCursor().onsuccess = (event) => {
var cursor = event.target.result;
if(cursor) {
this.encryption.loadIdentity((success) => {
if(success) {
this.loadDb(() => {
document.dispatchEvent(new CustomEvent('api-ready', {}));
setInterval(this.syncDb.bind(this), this.syncInterval);
this.syncDb();
});
} else {
document.dispatchEvent(new CustomEvent('api-fail', {}));
}
});
} else {
initialTransaction.objectStore('db').add({
/* [...] */
});
document.dispatchEvent(new CustomEvent('db-created', {}));
} // if/else cursor
}; // objectStore
loadDb(callback) {
this._tallies = [];
this._collections = [];
var dbStore = dbengine.db.transaction(['db'], 'readwrite').objectStore('db');
dbStore.get(1).onsuccess = (event) => {
var result = event.target.result;
var tallies = result.tallies;
if(result.tallies.length !== 0) {
tallies = this._encryption.decrypt(result.tallies);
}
tallies.forEach(((t) => {
/* [...] */
}));
var collections = result.collections;
if(collections.length !== 0) {
collections = this._encryption.decrypt(result.collections);
}
collections.forEach(((c) => {
/* [...] */
}));
callback()
}
} // loadDb
logout() {
var dbStore = dbengine.db.transaction(['db'], 'readwrite').objectStore('db');
var request = dbStore.get(1);
request.onsuccess = function(e) {
delete e.currentTarget.result.identity;
dbStore.put(e.currentTarget.result);
redirectTo('welcome');
};
} // logout
syncDb() {
var tallyDataString = JSON.stringify(this.tallies);
var collectionDataString = JSON.stringify(this.collections);
var encryptedTallyDataString = this._encryption.encrypt(tallyDataString);
var encryptedCollectionDataString = this._encryption.encrypt(collectionDataString);
var dbStore = dbengine.db.transaction(['db'], 'readwrite').objectStore('db');
dbStore.get(1).onsuccess = (event) => {
var data = event.target.result;
if(data.tallies !== encryptedTallyDataString) {
data.tallies = encryptedTallyDataString;
dbStore.put(data);
}
if(data.collections !== encryptedCollectionDataString) {
data.collections = encryptedCollectionDataString;
dbStore.put(data);
}
var syncEvent = new CustomEvent('sync', {});
document.dispatchEvent(syncEvent);
} // onsuccess
dbStore.get(1).onabort = (event) => {
var error = event.target.error; // DOMError
// if (error.name == 'QuotaExceededError') {
// alert('Sync failed. Quota exceeded.')
// }
alert(error.name);
} // onabort
} // syncDb
loadIdentity(callback) {
var dbStore = dbengine.db.transaction(['db'], 'readwrite').objectStore('db');
dbStore.get(1).onsuccess = (event) => {
var result = event.target.result;
if(!result.identity || !result.identity.publicKey || !result.identity.privateKey) {
if(window.location.pathname !== "/app/welcome/") {
redirectTo('welcome');
}
}
this.identity = {
/* [...] */
};
var solid = false;
if(result.identity.publicKey && result.identity.privateKey) {
solid = true;
}
callback(solid);
};
} // loadIdentity
setIdentity(identity, username) {
var dbStore = dbengine.db.transaction(['db'], 'readwrite').objectStore('db');
var getRequest = dbStore.get(1);
getRequest.onsuccess = (event) => {
var result = event.target.result;
result.identity = {
/* [...] */
};
this.identity = identity;
var request = dbStore.put(result);
} // getRequest
} // setIdentity