I have this script, attr is hash object to keep application data.
const [attr,setAttr] = useState()
const onSetAttr = (data) =>{
console.log(data);
var new_attr = attr;
for (let key in new_attr) {
if (key in data){
new_attr[key] = data[key];
}
}
setAttr(new_attr);
console.log(new_attr);
}
It means the data and attr_should be marged as hash.
However setAttr works well but component is not re-rendered.
I google around and found this is related with imutable/mutable.
However in this case, how can i re-rendering forcebly?
You're mutating the same object, so reconciliation doesn't work properly. You should create a new one:
const [attr,setAttr] = useState()
const onSetAttr = (data) =>{
var new_attr = {...attr}; // <= object destructuring creates a new object
for (let key in new_attr) {
if (key in data){
new_attr[key] = data[key];
}
}
setAttr(new_attr);
console.log(new_attr);
}
Related
I created an array in a separate GS file using the code provided below. I tried calling it in my HTML file. My goal is to compare the contents the array to the parameter email. However, the value returned by google.script.run.withSuccessHandler() is undefined
//in GS
function mailGetter()
{
//open sheet
var sheet = SpreadsheetApp.openByUrl("https://sheet.url").getSheetByName("Email Sheet").activate();
//get size of given row range
var row_data_email = sheet.getRange("C2:C").getValues();
var emailArray = row_data_email.join().split(',').filter(Boolean);
Logger.log(emailArray);
return emailArray;
}
//in HTML
function checkEmail(email)
{
var reg1 = /^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/;
var arraySize = google.script.run.withSuccessHandler(misc).sizeGetter();
console.log(arraySize);
var emailArray = new Array(arraySize);
emailArray = google.script.run.withSuccessHandler(misc).mailGetter();
console.log(emailArray);
if (reg1.test(email) == false)
{
emails.style.border = "1px solid red";
document.getElementById('submitBtn').disabled = true;
}
else if (reg1.test(email) == true)
{
emails.style.border = "1px solid green";
document.getElementById('submitBtn').disabled = false;
}
for (var row = 0; row < arraySize; row++)
{
if (emailArray[row][0] == email)
{
emails.style.border = "1px solid green";
document.getElementById('submitBtn').disabled = false;
break;
}
else if (emailArray[row][0] != email)
{
emails.style.border = "1px solid red";
document.getElementById('submitBtn').disabled = true;
}
}
}
function misc()
{
console.log("Pass");
}
Issue:
Using a asynchronous function's(google.script.run) return value, which will always be undefined.
Solution:
Use successHandler as mentioned in another answer or We can use promises with async/await.
Snippet:
/*Create a promise around old callback api*/
const p = func =>
new Promise(resolve=>
google.script.run.withSuccessHandler(resolve)[func]()
);
async function checkEmail(email) //modified
{
var arraySize = await p('sizeGetter');//Wait to resolve
console.log(arraySize);
//var emailArray = new Array(arraySize);
var emailArray = await p('mailGetter');//Wait to resolve
console.log(emailArray);
//....
}
Note:
It's better to reduce the number of calls to the server. If you can combine both Getters to a single server function, it'll be better.
The above is a snippet showing how to use async/await. But if you wait for each response from the server as shown above, your front end/UI will be slow. Wait only if absolutely necessary. Calls to server should be non-blocking/asynchronous.
References:
Promises
async
await
Issue is in these lines:
emailArray = google.script.run.withSuccessHandler(misc).mailGetter();
console.log(emailArray);
You're trying to execute mailGetter() and expecting it to return value which you're storing in emailArray but this method is asynchronous and does not return directly
Rather you'll get the value in callback which you have defined as SuccessHandler
Suggested solutions :
Calling Apps Script functions from a template : https://developers.google.com/apps-script/guides/html/templates#apps_script_code_in_scriptlets
Calling Apps Script APIs directly : https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_apis_directly
Pushing variables to templates : https://developers.google.com/apps-script/guides/html/templates#pushing_variables_to_templates
Reference : https://developers.google.com/apps-script/guides/html/reference/run#myFunction(...)
I am reading a Excel File as json objects.
Here is my Excel File.
I am reading excel data as json objects in the Inspect Tools as below.
I need to pass these json objects into a react table which can be selcted as row by row.
Is there any method to do this?
Since the excel data is shown in the inspect tools, we can set the data into the state and directly call them in the table.
handleFiles = event => {
var fileType = "xlsx";
if (event.target.files && event.target.files[0]) {
var extension = event.target.files[0].name
.split(".")
.pop()
.toLowerCase(), //file extension from input file
isSuccess = fileType.indexOf(extension) > -1; //is extension in acceptable types
if (isSuccess) {
//yes
var reader = new FileReader();
reader.onload = event => {
alert("Valid File extension");
const bstr = event.target.result;
const wb = XLSX.read(bstr, { type: "binary" });
console.log("data>>>", wb);
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_json(ws);
//set data into
this.setState({
data: XLSX.utils.sheet_to_json(ws)
});
// ws;
// { header: 1 }
// );
/* Update state */
console.log("Data>>>", data);
};
reader.readAsBinaryString(event.target.files[0]);
} else {
//no
alert("Invalid File Type ");
}
}
};
In the table it should be updated as below.
<CheckboxTable
.............
data={this.state.data}
........
/>
To iterate over object you can do this,
const data = Object.keys(obj).forEach(function(key,index) {
// key: the name of the object key
// index: the ordinal position of the key within the object
return (<tr><td>{obj[key]}</td>... //create td's as per your data</tr>)
});
In your component.
<Table>
{data}
</Table>
I am new to react-native and calling a function inside a fucntion.
I have done as below so far :
Step 1 : Created a function _snapshotToArray to convert the firebase snapshot to Arrray.
_snapshotToArray(snapshot) {
var returnArr = [];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
Step 2 : Created another function as below and calling _snapshotToArray inside it.
_readUserDataFromFirebaseConsole() {//once and on
firebase.database().ref('Users/').on('value', function (snapshot) {
console.log(this._snapshotToArray(snapshot));
Toast.show(this._snapshotToArray(snapshot),Toast.LONG);
});
}
Talking about this call :
console.log(this._snapshotToArray(snapshot));
When I press CTRL+CLick, it not letting me to navigate to body of the fuction _snapshotToArray.
In Device am getting below error :
_snapshotToArray is not defined
What might be the issue ?
I'm not at my PC right now, so I cannot test it, but from looking at your code, you need to use a different function notation to allow the varibale access of/from parent methods and parent class.
_snapshotToArray = snapshot => {
var returnArr = [];
snapshot.forEach(function(childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
and
_readUserDataFromFirebaseConsole = () => {
firebase.database().ref('Users/').on('value', snapshot => {
console.log(this._snapshotToArray(snapshot));
Toast.show(this._snapshotToArray(snapshot),Toast.LONG);
});
}
I'm using bluebird for the control flow in my application, I'm trying to implement promisify to extend my recursive function into a promise, but it seems like the "then" method never got executed
I'm doing a mapping from one JSON object to another, the find function looks recursively into the JSON properties and returns the property based on an specific condition.
var promise = require("bluebird");
var mapToModel = function(res){
// res is a json structure
var processes = res.definitions.process;
var diagrams = res.definitions.BPMNDiagram;
var documents = [];
for(var prop in processes) {
if(processes.hasOwnProperty(prop)){
var propertyNames = Object.getOwnPropertyNames(processes[prop]);
for(var property in processes[prop]){
var mapping ={};
if(property==="$"){
//do something with the process
}else{
//shapes
mapping.hash = hash.hashCode(new Date().toString());
mapping.type = property;
mapping.value = processes[prop][property];
var bpmnItem = findPromise(processes[prop][property], function(x) {return x.$.id;}).then(function(value){
//I'm not reaching this point
var bpmnId = value.$.id;
console.log(value);
if(bpmnId!=undefined){
console.log("return:"+ bpmnId);
}
});
documents.push(mapping);
}
}
}
return documents;
}
}
var findPromise = promise.promisify(find);
function find(items,f) {
for(var key in items) {
var elem = items[key];
if (f(elem)) { return elem;}
if(typeof elem === "object") {
find(elem,f); // call recursively
}
}
}
The Bluebird promisify method works on the accepted callback convention for NodeJS - nodebacks.
Nodebacks are in the specific format of someOp(function(err,result){ that is - the first argument is always an error.
In fact, your find method is not even asynchronous, so there is no reason to promisify it to begin with. You can simply call it as it is.
Generally, you should not promisify synchronous functions, you just call them normally. In fact, you don't seem to have any asynchronous operation in your code - so you should not be using promises at all in it.
You can simply do:
mapping.value = processes[prop][property];
var value = find(processes[prop][property], function(x) {return x.$.id;});
var bpmnId = value.$.id;
console.log(value);
if(bpmnId!=undefined){
console.log("return:"+ bpmnId);
}
Remember, Promises are an abstraction over an eventual result. You keep doing everything synchronous just like you did before.
I have an existed database. I'm trying to retrieve the data from database using indexedDB but i'm unable to get the data from database.
var data = [];
// creating or opening the database
var db;
var request = window.indexedDB.open("database");
request.onerror = function(event) {
console.log("error: ");
};
request.onsuccess = function(event) {
db = request.result;
console.log("success: "+ db);
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("Subject", {keyPath: "id"});
for (var i in data) {
objectStore.add(data[i]);
}
}
function readAll() {
var objectStore = db.transaction("Subject").objectStore("Subject");
console.log(objectStore);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for id " + cursor.key + " is " + cursor.value.Subject);
cursor.continue();
}
else {
alert("No more entries!");
}
};
}
Thanks in Advance.
You're pretty close.
var data = [];
I'll presume that you actually have some data somewhere, and that it indeed has an id attribute since you're specifying that as your index key e.g.
var data = [{id: 'foo' }, { id: 'bar' } ];
Now here:
var objectStore = db.createObjectStore("Subject", {keyPath: "id"});
for (var i in data) {
objectStore.add(data[i]);
}
(Careful with for..in and arrays)
I don't think you're actually adding any data here, which is one reason why you can't read it. To add data to an object store, try to first create a read/write transaction first and then get your reference to the object store and add your object.
var trans = db.transaction(["Subject"], "readwrite").objectStore("Subject");
Note the usage of an array as the first argument to transaction() and "readwrite" as the second param. (Some examples use the IDBTransaction.READ_WRITE constant but this doesn't seem to work with recent versions of Webkit.)
var objectStore = db.transaction("Subject").objectStore("Subject");
Try this instead:
var trans = db.transaction( [ "Subject" ] );
, objectStore = trans.objectStore( "Subject" );
objectStore.openCursor( IDBKeyRange.lowerBound(0) ).onsuccess = function(event) {..}
I did encountered the same error once. it occurs because at times the onSuccess is executed even before the result data is returned. So you should check if result data is empty.
To solve the issue try using oncomplete instead of onSuccess and also use Jquery indexedDB plugin. The plugin requires certin code changes but has more consistent implementation of indexedDB.
See http://nparashuram.com/jquery-indexeddb/