I have the following React class. At first, the console will print an empty array {}, which will return the empty div. However, half a second later the console will print the correct values - but the empty div remains. How should I change the class to properly load the JSON?
var TableData = React.createClass({
render: function() {
console.info(JSON.stringify(this.props.summary));
if (!this.props.data || !this.props.summary) {
return <div>Loading name table..</div>
}
var summary = this.props.table;
var nameTable = summary.nameTable;
var nameTableArr = Object.values(nameTable);
return ( // A table is returned here, works with the same data structure as is present in the JSON
If I go to the console, the console.info prints an empty JSON string {} initially, which correctly returns the "loading names table..." div. However, data is printed in the console half a second later, but it never proceeds to go out of the if statement and populate the table.
It works if I change the nameTable var to include "manual" data, so it must be something with rendering the server-side data that's delayed half a second.
How could I change the above class to delay rendering for, say, 1 second and then populate the table? It would work in that case I suspect.
Removing the if statement results in Uncaught TypeError: Cannot convert undefined or null to object in the console, which makes sense since the string is indeed empty for half a second.
Im not a React experienced, but this looks like you have problem with asynchronous behavior.
In order to help you more, Ill need the part of the code where ajax is called.
The whole issue in my opinion is that your code is triggered first when there are no results yet, and after data are loaded it will not trigger again.
So take a closer look at your handling of AJAX async stuff, cause your issue is there.
Related
I have a problem, when I add an element in my bdd and my view client (with $set), a function is called. But I have error for accessing data, with the console.log, I see the new data is added but the data inside the object is not.
This is my error:
vue.esm.js?efeb:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"
for (var i = 0; i < this.assignments.length; i++) {
var date1 = new Date(date);
var date2 = new Date(this.assignments[i].start);
if (user === this.assignments[i].User.id) {
The error is saying that you are accessing an undefined value in this case the User of this.assignments[i].User is undefined.
Edit : To be sure check every thing
if (this.assignments && this.assignments[i] && this.assignments[i].User && user === this.assignments[i].User.id)
Well..
If I see problem like this, I am always trying to put debugger right after console.log in order to stop executing script. Don't always trust console.logs someone somewhen said.
Probably with that debugger, console.log will show something different, and that's because it's holding reference, so it's filled later. (you will be able to see that in the console)
Anyway...
What You can try to do for sure is
await this.$nextTick() - waiting for next render, then continue
Put it right before your not working code.
If not you can try forbidden technique - to wrap your code in
setTimeout(()=>{
...your code which needs to wait for render
},0)
I am trying to debug some javascript code. The variable I want to debug is a JS object of objects, loaded asynchronously (ajax callback). I am debugging it outside the callback.
I am pretty sure that the problem is a race-condition problem, but I want to be sure (and it is not my question).
The problem I find when debugging is that console.log gives me an information which does not make sense with what the code is doing. Therefore, either I am missing something in the code, or the result I see in the console is the not a snapshot of the state of the variable when I runned console.log.
If it turns out to be the later, how can i get a snapshot of the state of an asynchronously loaded JS object?
This is a simplified example of the code:
//This call takes a while to invoke the callback
$.get("url",function(data){
//Process data
globalVariable = data; //JSON (Object of objects)
}
//Couple lines afterwards
/* This console.log shows (in Firebug's console) "Object { }" and when I click it,
I can see the object with all its fields filled (oher objects)
*/
console.log(globalVariable);
for(var e in globalVariable){
//Does not enter here, meaning that the object is empty
}
console.log is itself asynchronous and it shows references rather than snapshots, sometimes.
If you log an object you will get a nice clickable interface where you can inspect the object. If the object changes you will see those changes reflected there.
If you want a real snapshot you're going to have to do some serialization and serializing objects is not trivial. If your objects just are data and have no functions or references you can use JSON.stringify(obj, undefined "\t").
A smarter way is to pause your asynchronous events so you can inspect the latest state of the object.
Write it like this instead. This way globalVariable will have the data before you act upon it.
$.get("url",function(data){
//Process data
globalVariable = data; //JSON (Object of objects)
for(var e in globalVariable){
//this will run
}
}
I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().
I'm using jqgrid with grails and need to select some objects. This works for one given object. My problem is that sometimes, calling function has no id. So there is nothing to do after grid completion. And I'm not able to do that even after trying if (false)... In all case, grid.jqgrid("setSelection... is executed and I get the message
java.lang.NullPointerException
Cannot get property 'id' on null object
which is true. But why is this line executed ???
gridComplete: function() {
if (false) {
grid.jqGrid("setSelection",'${cableFocus.id}',true);
}
return;
I have a second question : How can I use gridComplete to select several rows instead of one ?
Thanks very much for any help,
Olivier
The problem is not with gridComplete or your if statement (which is javascript). As you are getting a java error i'm guessing ${cableFocus.id} is placeholder (which will always get exectuted)
So the javascript is not running but your java code is still attempting to run and throwing the error
I am testing some code in my web console (using coffescript)
#user = new Onethingaday.Models.User()
#user.url= "/users/#{current_user.get('nickname')}.json?id_type=nickname"
#user.fetch()
console.log(#user)
console.log(#user.get("facebook_id"))
The console.log(#user) line shows the following:
However, console.log(#user.get("facebook_id")) shows undefined.
I see that user has the facebook_id attribute. How do I retrieve the value of it?
This looks like a timing issue, albeit an odd one. fetch is asynchronous; you need to wait until its success callback is called before trying to access any attributes.
Try this:
#user.fetch success: =>
console.log(#user)
console.log(#user.get("facebook_id"))
It's confusing that the first console.log would show user.attributes.facebook_id existing and the second wouldn't, but console.log is itself asynchronous in Webkit's implementation, so what's going on is that the #user.get call is being resolved immediately (synchronously), whereas the object inspection in the first console.log is resolving later—after the fetch completed.
It looks like facebook_id is a property of the attributes property of the #user object. If that's the case, I'd think the following would work:
#user.attributes.facebook_id